React prop更改时重新请求数据

Question

我正在使用react-router并进行反应16.4。当调用history.push更新URL查询参数时，该页面不会重新加载，但是我想通过AJAX重新请求数据。我目前正在使用getDerivedStateFromProps和componentDidUpdate来侦听道具更改，但是我发现当道具更改时也触发了componentDidUpdate时，我应该直接使用componentDidUpdate吗？ URL查询更改时，如何执行重新请求数据的功能？ 这是我的代码的一部分：

static getDerivedStateFromProps(props, prevState) {
        const page = qs.parse(location.search)['page'] || 1
        if (page != prevState.page) {
            return {
                page,
                need_update: true
            }
        }
        return null
    }
componentDidUpdate() {
        if (this.state.need_update) {
            this.getData()
        }
    }

Answer 1

如果您更像这样使用componentDidUpdate，您的代码可能会起作用：

componentDidUpdate(prevProps, prevState) {
  if (prevProps !== this.props) {
    //do stuff here 
  }
}

它从字面上将新道具与以前的道具进行比较，并且您可以以相同的方式比较状态。