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>
        );
    }
};

render（）中的语句console.log(this.state);和{this.state.error != null ? <p>{this.state.error}</p> : ''}抛出错误，指出Uncaught TypeError: Cannot read property 'error' of null。这意味着this.state被设置为null。

为什么将状态设置为null以及如何解决此问题（在TypeScript中）？

先谢谢。

Answer 1

正如评论中已经提到的那样，你必须在构造函数中初始化状态，或者使用像这样的属性初始化器来初始化状态：

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

  this.state = {
    error: ''
  };

  [...]

}

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

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

  }

}

解决方案是等效的，但第一个更优雅

this.state在渲染React和Typescript中为null

2 个答案: