Question

我用这个方法来处理组件，componentWillMount初始化主页的数据和routerWillReceiveProps当路由器改变时（类别页面），但是当我从类别页面回到主页时，我知道因为componentWillMount只做了一次所以我看不到数据。

componentWillMount(){
        this.props.fetchBooks(1)
    }
componentWillReceiveProps(nextProps){
        if(nextProps.match.params.id && nextProps.match.params.id !== this.props.match.params.id){
            this.props.fetchBookByCategory(nextProps.match.params.id)
        } 
    }

我将这个初始化的代码放到componentWillReceiveProps，它可以工作，但它会不断地调用fetchBooks（1），尽管我试着做了一些条件，请帮我解决这个问题，非常感谢。

Answer 1

你必须在componentWillReceiveProps上将thisProps设置为this.props

componentWillReceiveProps(nextProps){
        if(nextProps.match.params.id && nextProps.match.params.id !== this.props.match.params.id){
            this.props.fetchBookByCategory(nextProps.match.params.id)
 this.props = nextProps;
        }

Answer 2

永远不要在componentWillMount或constructor中抓取。而是在componentDidMount中进行。

componentWillMount：

在安装发生之前立即调用componentWillMount（）。它在render（）之前调用，因此同步设置状态此方法不会触发重新渲染。避免引入任何此方法中的副作用或订阅。

componentDidMount

componentDidMount（）在组件出现后立即调用安装。需要DOM节点的初始化应该放在这里。如果你需要从远程端点加载数据，这是一个好地方实例化网络请求。在这种方法中设置状态会触发重新渲染。

如果尚未收到数据，您可以有条件地呈现您的网页。

render(){
  return(
    <div>
      {
        data.length > 0 ? 
        <List items={data} /> : 
        <div>Loading...</div>
      }
    </div>
  );
}

反应生命周期

2 个答案: