ReactJs props 在 componentDidMount 中返回 undefined

Question

我的道具有问题。

在我的课堂上，如果我这样做：

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

这是工作，我的名字出现。

但如果我尝试：

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

那返回我undefined，有人可以帮助我吗？

Answer 1

首先，componentWillReceiveProps已被弃用。因此，您可能希望添加UNSAFE_到方法名称中。文档中的注释：

笔记

这个生命周期以前被命名为 componentWillReceiveProps。该名称将继续有效，直到版本 17。使用 rename-unsafe-lifecycles codemod 自动更新您的组件。

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

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}`);
  }
}