Question

我有一个图表组件，我正在通过props数据从api获取数据以放入图表，但是当我将父对象作为props发送到chart组件时，它不会更新父状态，但是会更新子对象没有更新，如果我登录

componentWillReceiveProps(props) {
  console.log(props);
  // it shows updated value but if i do this 
  this.loadData();
}

loadData = () => {
  console.log(props)
  // it's value is old and not updated 
}

我已经在父项中检查了状态，状态已更新，当我第一次单击父项时，我在父项中有一个click事件，父项状态发生了变化，但图表组件的属性不会发生变化，如果我单击第二次，图表组件的属性将会发生变化。首次点击状态

这是我的github存储库https://github.com/naveenkash/forex 查看图表组件道具和页面index.js图表，以通过index.js获取道具

Answer 1

由于componentWillReceiveProps道具是对新道具的引用，因此它们在类的其他部分尚不可用，因此您应将它们传递给loadData

componentWillReceiveProps(props){
   this.loadData(props);
}

loadData=(props)=>{
   console.log(props)
}

Answer 2

德米特里所说的是正确的，this.props截至componentWillReceiveProps(props)并没有改变。因此，当您致电this.loadData()时，您仍在使用旧道具来呼叫它。

请注意，componentWillReceiveProps(props)是 unsafe

您应该使用componentDidUpdate(previousProps)，在这里可以调用this.loadData()，它将以更新的this.props执行。

Answer 3

考虑更改以下代码，这是js范围问题无法解决事件提升周期问题：

componentWillReceiveProps(props) {
  console.log(props);
  // it shows updated value but if i do this 
  this.loadData(props);
}

loadData = (newProps) => {
  console.log(newProps)
  // it's value is old and not updated 
}

发送更新的父状态时，子项props不更新

3 个答案: