不从道具初始化状​​态

Question

我正在使用 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 初始化状态，但它只是用 undefined 初始化它

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 在处理类组件中的道具时说有一个适当的构造函数是正确的。

所以你的构造函数将是：-

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

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

Answer 2

你也应该像这样调用构造方法并初始化道具：

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

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