javascript - ReactJs props 在 componentDidMount 中返回未定义

Question

我的 Prop 有问题。

在我的类里面，如果我这样做:

<Input type="text" name="firstName" id="firstName" placeholder="First Name" value={this.props.user.firstName}/>

工作正常，我的名字出现了。

但如果我尝试:

componentDidMount = () => {
    console.log("firstName : "+this.props.user.firstName)
 }

返回给我未定义，有人可以帮助我吗？

Answer 1

首先，componentWillReceiveProps 已被弃用。因此，您可能需要将 UNSAFE_ 添加到方法名称中。来自 documentation 的注释:

Note

This lifecycle was previously named componentWillReceiveProps. That name will continue to work until version 17. Use the rename-unsafe-lifecycles codemod to automatically update your components.

其次，您不将生命周期方法定义为箭头函数。你这样做:

UNSAFE_componentWillReceiveProps(nextProps) {
    console.log("firstName : " + this.props.user.firstName)
}

最佳解决方案？这:

componentDidUpdate(prevProps) {
  if (prevProps.user !== this.props.user) {
    console.log(`firstName: ${this.props.user.firstName}`);
  }
}