反应警告:在施工期间未正确初始化状态

Question

我用getDerivedStateFromProps反应16.3.为什么反应会显示此警告？

Did not properly initialize state during construction. Expected state to be an object, but it was undefined.

在codepen上演示

class TestComponent extends React.PureComponent {
    static getDerivedStateFromProps(nextProps) {
        const {record,} = nextProps;

        return {
            title: record ? record.title : '',
        };
    }


    render() {
        const {title} = this.state;

        return (
            <div>{title}</div>
        );
    }
}

Answer 1

是的,您需要为状态设置初始值:

class TestComponent extends React.PureComponent {
  constructor(props) {
   super(props);
   this.state = {
    title: ''
   };
 }
// rest of your code

或者,使用ES7语法 :(如果您使用create-react-app创建应用程序,则会支持此功能)

class TestComponent extends React.PureComponent {
  state = {
   title: ''
  }
// rest of your code

您可能有兴趣在媒体上阅读此博客.