Question

没有通过 props 初始化状态

2021-02-18

260

reactjs

我正在使用 React 版本“17.0.1”，当我尝试从 props 初始化组件状态时，它不起作用，只是用未定义初始化状态。以下示例将说明我的问题。组件 Two

    class Two extends React.Component {
     state = {
       name: this.props.option.name
      }
     render(){
       console.log(this.state.name)

     return (
       <div>
          {this.state.name}
       </div>
      )
    }
}

和组件 One 是：

    class One extends React.Component {
     render(){
        return  <Two option={name='riaz'} />
       }
     }

在组件 Two 中，我尝试从 props 初始化状态，但它只是用未定义初始化它

ReactDOM.render(<One />,document.getElementById('app'))

并且我已经安装并配置了 @babel/plugin-proposal-class-properties

Answer 1

class One extends React.Component {
     render(){
        return  <Two option={name='riaz'} />
       }
     }

应该是

class One extends React.Component {
     render(){
        return  <Two option={{name:'riaz'}} />
       }
     }

您访问它的方式告诉我您的 option 是一个具有属性 name 的对象。因此您也需要将其传递为这样。

此外，我认为 @Konstantin Samarin 说在处理类组件中的 props 时要有一个适当的构造函数是正确的。

因此您的构造函数将是：-

constructor(props) {
  super(props);
  this.state = {
       name: this.props.option.name
  }
}

但 React 不建议这样做。您可以在他分享的文档链接中看到相同的内容。

Answer 2

您还应该调用构造函数方法并初始化 props，如下所示：

constructor(props) {
  super(props);
  this.state = {
       name: this.props.option.name
  }
}

否则 props 未定义，请查看官方文档： https://reactjs.org/docs/react-component.html#constructor 。将 props 复制到 state 中仍然不是最佳实践。