类型 Readonly { }

Question

我收到以下错误：

“类型‘Readonly<{}>’上不存在属性‘items’。”和 “类型‘Readonly<{}>’上不存在属性‘value’。”

我正在尝试创建“添加评论，您可以在其中投票和反对”。另外，当我刷新页面时，添加的项目不再可用。

以下代码使用 React 和 typescript：

Abc.tsx:


  export default class Abc extends React.Component{

constructor{

}
handleChange(event){

}

addItem(){

  })
  this.setState({items:itemsCopy, value:''});
}




 render(){
   return(
    <div>
      <input value={this.state.value} onChange={this.handleChange.bind(this)} />
      <button onClick = {() => this.addItem()}>Submit</button>
      <PostList postList = {this.state.items} 
                updateScore = {this.updateScore.bind(this)}
                removeItem = {this.removeItem.bind(this)}/>
    </div>
  );
  }
}

Answer 1

要回答问题的第一部分，您需要显式定义组件状态的类型。您可以通过为其编写一个接口来实现。

interface AbcState {
  items: any[]; //replace any with suitable type
  value: string;
}

export default class Abc extends React.Component<{}, AbcState> {
 // the rest

}

关于数据不持久化的问题，本地组件状态不会存储任何超出其生命周期的数据。您可以将数据保存在数据库中，也可以将其缓存在本地存储中。

Answer 2

@JayC：教程指南必须是 JavaScript，因为 Typescript 中使用了严格模式。我们在 Typescript 中面临这个问题。