类型“只读<{}>”上不存在属性“值”

Question

我需要创建一个表单，该表单将根据 API 的返回值显示某些内容。我正在使用以下代码：

 class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value); //error here
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} /> // error here
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

我收到以下错误：

 error TS2339: Property 'value' does not exist on type 'Readonly<{}>'.

我在评论代码的两行中遇到了这个错误。这段代码甚至不是我的，我是从 react 官方网站 ( https://reactjs.org/docs/forms.html ) 获得的，但它在这里不起作用。

我正在使用 create-react-app 工具。

原文由 Luis Henrique Zimmermann 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Component 定义 如下：

 interface Component<P = {}, S = {}> extends ComponentLifecycle<P, S> { }

这意味着状态（和道具）的默认类型是： {} 。

如果你想让你的组件在状态中有 value 那么你需要这样定义它：

 class App extends React.Component<{}, { value: string }> {
    ...
}

要么：

 type MyProps = { ... };
type MyState = { value: string };
class App extends React.Component<MyProps, MyState> {
    ...
}

原文由 Nitzan Tomer 发布，翻译遵循 CC BY-SA 4.0 许可协议