1

我用这个方法来处理组件，componentWillMount 来初始化主页的数据，当路由器更改（类别页面）时使用 componentWillReceiveProps，但是当我从类别页面返回主页时，我知道因为 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），尽管我试图处理一些条件，请帮我解决这个问题，非常感谢。

4

2 回答 2

0

永远不要取入componentWillMount或constructor. 而是在componentDidMount.

组件WillMount：

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

组件DidMount

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

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

render(){
  return(
    <div>
      {
        data.length > 0 ? 
        <List items={data} /> : 
        <div>Loading...</div>
      }
    </div>
  );
}
于 2017-10-02T08:01:10.583 回答
0

您必须在 componentWillReceiveProps 上将 nextProps 设置为 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;
        }
于 2017-10-02T07:53:20.880 回答