在render React和Typescript中this.state為null

Question

我是ReactJS的新手。 正在觀看用ES6 JavaScript記錄的教程，同時我試圖在TypeScript中重新創建相同的應用程序（我也是TypeScript的新手！！）。 在ES6中，如果特定組件需要維護自己的狀態，則需要使用基於類的方法。 我已經安裝了"babel-plugin-transform-class-properties"因此我將ES6中的狀態設置為export default class SomeClass { state = { someProperty : someValue }} 。 但是在TypeScript中，我為每個組件使用基於類的方法。 因此，這是一個試圖維護其自身狀態的組件：

 import React from 'react'; interface IAddOptionProps { handleAddOption: (option: string) => string |null; }; interface IAddOptionState { error: any; }; export default class AddOption extends React.Component<IAddOptionProps, IAddOptionState> { handleAddOption = (e:any) => { e.preventDefault(); const option = e.target.elements.option.value.trim(); const err : string = this.props.handleAddOption(option); this.setState(() => { return { error: err } }); if (!err) { e.target.elements.option.value = ''; } } render() { console.log(this.state); return ( <div> {this.state.error != null ? <p>{this.state.error}</p> : ''} <form onSubmit={this.handleAddOption}> <div className="form-group"> <label>Enter an Option</label> <input type="text" className="form-control" id="option" name="option"/> </div> <button className="btn btn-primary">Add option</button> </form> </div> ); } }; 

語句console.log(this.state); 和{this.state.error != null ? <p>{this.state.error}</p> : ''} render（）中的{this.state.error != null ? <p>{this.state.error}</p> : ''} Uncaught TypeError: Cannot read property 'error' of null錯誤，指出Uncaught TypeError: Cannot read property 'error' of null 。 這意味着this.state被設置為null。

為什么將state設置為null以及如何解決（在TypeScript中）？

提前致謝。

Answer 1

正如評論中已經提到的那樣，您必須在構造函數中或使用屬性初始化程序來初始化狀態，如下所示：

class AddOption extends React.Component<IAddOptionProps, IAddOptionState> {

  this.state = {
    error: ''
  };

  [...]

}

否則， state將為null，並且您將收到如您的帖子中所述的錯誤。

Answer 2

您必須初始化狀態。 有兩種方法可以做到這一點

首先是使用屬性初始化器

class AddOption extends React.Component<IAddOptionProps, IAddOptionState> {

  this.state = {
    error: ''
  };

  render() {

    // Now you have your state! Do stuff here

  }

}

另一種方法是在構造函數中執行此操作

class AddOption extends React.Component<IAddOptionProps, IAddOptionState> {

  constructor(props) {
    super(props);

    this.state = {
      error: ''
    };
  }

  render() {

    // Now you have your state! Do stuff here

  }

}

解決方案是等效的，盡管第一個更優雅