未从props初始化状态

Question

我使用的是React版本"17.0.1"当我尝试从props初始化组件状态时它不起作用它就用undefined初始化状态。下面的例子将说明我的问题。元件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我试图从道具初始化状态，但它只是初始化它与未定义

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中并不是最佳实践。