Reactjs 反应-Typescript中的析构函数状态错误

我试图通过参考一个教程来实现一个用于自动完成的react组件。我正在使用Typescript进行开发。当我试图破坏render suggestions方法中的状态时，TSLint编译器会显示一个错误，即{}类型上不存在属性建议。谁能帮我克服这个问题呢。这是一个很大的帮助

import * as React from 'react';

export default class Autocomplete extends React.Component<{},{}> {
    items: string[];  
    constructor( props){
        super(props);
        this.state = {   
            suggestions :[],
        };
        this.items =['David','Damian','sara'];
    }

    render() {
        return (
            <div>
            <input
                type="text" onChange={this.onTextChanged}        
            />  
                {this.renderSuggestions()}                
            </div>
        );
    }  

    onTextChanged = (e) =>{
        console.log(e.target.value);    
        const value = e.target.value;  
        let suggestions =[];
        if(value.legth>0){
            const regex = new RegExp(`^${value}`,'i');
            suggestions = this.items.sort().filter(v => regex.test(v));
        }
        this.setState(()=> ({suggestions}));
    }

    renderSuggestions() {
        const {suggestions } = this.state;
        if(suggestions.length === 0){
            return null;
        }
        return (
            <ul>
                {suggestions.map((item)=> <li>{item}</li>)}   
            </ul>       
        );
    }   
}

import*as React from'React'；
导出默认类Autocomplete扩展React.Component{
项目：字符串[]；
建造师（道具）{
超级（道具）；
this.state={
建议：[]，
};
this.items=['David'，'Damian'，'sara']；
}
render（）{
返回(
{this.renderSuggestions（）}
);
}  
onTextChanged=（e）=>{
console.log（如target.value）；
常量值=e.target.value；
让建议=[]；
如果（长度值>0）{
const regex=new RegExp（`^${value}`，'i'）；
建议=this.items.sort（）.filter（v=>regex.test（v））；
}
this.setState（（）=>（{suggestions}））；
}
renderSuggestions（）{
const{suggestions}=this.state；
如果（建议长度===0）{
返回null；
}
返回(

{建议.map（（项目）=>
{item}
）}

);
}   
}

[编辑：附上屏幕截图]

错误在您的

如果（value.legth>0）{}

，您将错过

长度的
n
。那只是一个打字错误

我也试过打字脚本版本，这是唯一的错误


更新的工作代码是

 import * as React from 'react';

export default class Autocomplete extends React.Component {
    items=[];  
    constructor( props){
        super(props);
        this.state = {   
            suggestions :[],
        };
        this.items =['David','Damian','sara'];
    }

    render() {
        return (
            <div>
            <input
                type="text" onChange={this.onTextChanged}        
            />  
                {this.renderSuggestions()}                
            </div>
        );
    }  

    onTextChanged = (e) =>{
        console.log(e.target.value);    
        const value = e.target.value;  
        let suggestions =[];
        if(value.length>0){
            const regex = new RegExp(`^${value}`,'i');
            suggestions = this.items.sort().filter(v => regex.test(v));
        }
        this.setState(()=> ({suggestions}));
    }

    renderSuggestions() {
        const {suggestions } = this.state;
        if(suggestions.length === 0){
            return null;
        }
        return (
            <ul>
                {suggestions.map((item)=> <li>{item}</li>)}   
            </ul>       
        );
    }   
}

import*as React from'React'；
导出默认类Autocomplete扩展React.Component{
项目=[]；
建造师（道具）{
超级（道具）；
this.state={
建议：[]，
};
this.items=['David'，'Damian'，'sara']；
}
render（）{
返回(
{this.renderSuggestions（）}
);
}  
onTextChanged=（e）=>{
console.log（如target.value）；
常量值=e.target.value；
让建议=[]；
如果（值.长度>0）{
const regex=new RegExp（`^${value}`，'i'）；
建议=this.items.sort（）.filter（v=>regex.test（v））；
}
this.setState（（）=>（{suggestions}））；
}
renderSuggestions（）{
const{suggestions}=this.state；
如果（建议长度===0）{
返回null；
}
返回(

{建议.map（（项目）=>
{item}
）}

);
}   
}
错误在您的

如果（value.legth>0）{}
，您将错过
长度的
n
。那只是一个打字错误

我也试过打字脚本版本，这是唯一的错误


更新的工作代码是

 import * as React from 'react';

export default class Autocomplete extends React.Component {
    items=[];  
    constructor( props){
        super(props);
        this.state = {   
            suggestions :[],
        };
        this.items =['David','Damian','sara'];
    }

    render() {
        return (
            <div>
            <input
                type="text" onChange={this.onTextChanged}        
            />  
                {this.renderSuggestions()}                
            </div>
        );
    }  

    onTextChanged = (e) =>{
        console.log(e.target.value);    
        const value = e.target.value;  
        let suggestions =[];
        if(value.length>0){
            const regex = new RegExp(`^${value}`,'i');
            suggestions = this.items.sort().filter(v => regex.test(v));
        }
        this.setState(()=> ({suggestions}));
    }

    renderSuggestions() {
        const {suggestions } = this.state;
        if(suggestions.length === 0){
            return null;
        }
        return (
            <ul>
                {suggestions.map((item)=> <li>{item}</li>)}   
            </ul>       
        );
    }   
}

import*as React from'React'；
导出默认类Autocomplete扩展React.Component{
项目=[]；
建造师（道具）{
超级（道具）；
this.state={
建议：[]，
};
this.items=['David'，'Damian'，'sara']；
}
render（）{
返回(
{this.renderSuggestions（）}
);
}  
onTextChanged=（e）=>{
console.log（如target.value）；
常量值=e.target.value；
让建议=[]；
如果（值.长度>0）{
const regex=new RegExp（`^${value}`，'i'）；
建议=this.items.sort（）.filter（v=>regex.test（v））；
}
this.setState（（）=>（{suggestions}））；
}
renderSuggestions（）{
const{suggestions}=this.state；
如果（建议长度===0）{
返回null；
}
返回(

{建议.map（（项目）=>
{item}
）}

);
}   
}
通过执行
React.component
在组件中指定状态类型为
{}
。通常可以通过让typescript推断状态来避免这种情况，但在构造函数内部指定状态时，这样做有点问题。通常可以通过将它们直接指定为类内的字段来修复这些问题，如

export default class Autocomplete extends React.Component {
    items = ['David','Damian','sara']
    state = { suggestions :[] }
    // rest of your component here
}

您可以在当前类中执行此操作，因为除了设置状态之外，您不使用构造函数，但是如果这不是一个选项，您可以通过将其作为组件的显式泛型参数来指定，从而确保typescript正确理解状态

interface AutocompleteState {
  suggestions: Suggestion[]
}

export default class Autocomplete extends React.Component<AutocompleteState> {
  constructor() {
    // ...
  }
}

接口自动完成测试{
建议：建议[]
}
导出默认类Autocomplete扩展React.Component{
构造函数（）{
// ...
}
}
通过执行
React.component
在组件中指定状态类型为
{}
。通常可以通过让typescript推断状态来避免这种情况，但在构造函数内部指定状态时，这样做有点问题。通常可以通过将它们直接指定为类内的字段来修复这些问题，如

export default class Autocomplete extends React.Component {
    items = ['David','Damian','sara']
    state = { suggestions :[] }
    // rest of your component here
}

您可以在当前类中执行此操作，因为除了设置状态之外，您不使用构造函数，但是如果这不是一个选项，您可以通过将其作为组件的显式泛型参数来指定，从而确保typescript正确理解状态

interface AutocompleteState {
  suggestions: Suggestion[]
}

export default class Autocomplete extends React.Component<AutocompleteState> {
  constructor() {
    // ...
  }
}

接口自动完成测试{
建议：建议[]
}
导出默认类Autocomplete扩展React.Component{
构造函数（）{
// ...
}
}
考虑到所有的评论和一些挣扎，以及一些阅读资料，我让它成功了。谢谢你的建议