Question

这是我的componentWillReceiveProps代码

componentWillReceiveProps(next) {
console.log('45', next)
if (this.props.favList) {
  this.setState({ favRest: this.props.favList })
  console.log('setting state',this.state)
}
else
  if(this.props.EventList) {
  this.setState({ loading: false, EventList: this.props.EventList });
}
}

当状态改变为this.props.favList时，它显示状态控制台中的更改已更改，但该状态在渲染方法中不受影响...在渲染方法中它显示以前的状态

Answer 1

this.props是当前道具（更新前），componentWillReceiveProps上的第一个参数是组件获得的新道具。这就是你想要的：

componentWillReceiveProps(next) {
  console.log('45', next)
  if (next.favList) {
    this.setState({ favRest: next.favList })
    console.log('setting state',this.state)
  }
  else
    if(next.EventList) {
    this.setState({ loading: false, EventList: next.EventList });
  }
}

Answer 2

如果您使用的是React 16.3，则可以使用getDerivedStateFromProps，它们在新生命周期方法中将不推荐使用willReceiveProps。根据其他答案，您可以访问下一个道具，这些道具将具有可用于映射到州的更新值。所以上面的代码如下：

static getDerivedStateFromProps(nextProps, prevState) {
    console.log('45', nextProps)
    if (nextProps.favList) {
        return {
            favRest: nextProps.favList
        }
     } else if (nextProps.EventList) {
         return {
             loading: false,
             EventList: nextProps.EventList
         }
    }
    return null;
}

从componentWillReceiveProps更改状态会影响组件

2 个答案: