reactjs - this.state 在渲染 React 和 Typescript 中为 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() 抛出错误，指出 Uncaught TypeError: Cannot read property 'error' of null .这意味着 this.state被设置为空。

为什么 state 被设置为 null 以及如何解决这个问题(在 TypeScript 中)？

提前致谢。

Answer 1

正如评论中已经提到的，您必须在构造函数中或使用这样的属性初始值设定项来初始化状态:

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

  this.state = {
    error: ''
  };

  [...]

}

否则 state将为空，您将收到您帖子中提到的错误。