Question

我将Redux重构为我的代码，但无法弄清楚如何获得以前的状态。我需要这个状态用于我的componentDidUpdate生命周期方法，以便我可以调用其他方法而不会陷入无限循环。

// when component re-renders
componentDidUpdate(prevState) {
 // if the current page changes, or the search term changes.
 if(prevState.currentPage !== this.props.bucketlistState.currentPage || 
  prevState.searchTerm !== this.props.bucketlistState.searchTerm) {
  this.getBucketlists();
 }
}

Answer 1

prevState是componentDidUpdate的第二个参数，第一个参数是prevProps

// when component re-renders
componentDidUpdate(prevProps, prevState) {
 // if the current page changes, or the search term changes.
 if(prevState.currentPage !== this.props.bucketlistState.currentPage || 
  prevState.searchTerm !== this.props.bucketlistState.searchTerm) {
  this.getBucketlists();
 }
}

检查 documentation

<强>语法：

componentDidUpdate(prevProps, prevState)

PS：它是一个反模式，具有可直接从道具派生的状态。您应该直接使用props并在componentDidUpdate中比较它们，如

// when component re-renders
componentDidUpdate(prevProps, prevState) {
 // if the current page changes, or the search term changes.
 if(prevProps.bucketlistState.currentPage !== this.props.bucketlistState.currentPage || 
  prevProps.bucketlistState.searchTerm !== this.props.bucketlistState.searchTerm) {
  this.getBucketlists();
 }
}

并且因为你只使用道具进行比较，所以在React的 v16.3 之前更合适的地方是componentWillReceiveProps函数，但是这个函数很可能在将来的主要React版本中被删除，并且您应该使用componentDidUpdate。有关更多信息，请检查

Can getDerivedStateFromProps be used as an alternative to componentWillReceiveProps

// when component re-renders
componentWillReceiveProps(nextProps, nextState) {
 // if the current page changes, or the search term changes.
 if(nextProps.bucketlistState.currentPage !== this.props.bucketlistState.currentPage || 
  nextProps.bucketlistState.searchTerm !== this.props.bucketlistState.searchTerm) {
  this.getBucketlists(nextProps);
 }
}

Answer 2

componentDidUpdate取两个参数，第一个是前面的道具，第二个是先前的状态

componentDidUpdate(prevProps , prevState) {

Answer 3

事实证明我必须使用prevProps而不是prevState，因为来自商店的状态被作为道具返回!!!

componentDidUpdate(prevProps , prevState) {
    // if the current page changes, or the search term changes.
    if(prevProps.bucketlistState.currentPage !== this.props.bucketlistState.currentPage || prevProps.bucketlistState.searchTerm !== this.props.bucketlistState.searchTerm) {
        this.getBucketlists();
    }
}

Redux componentDidUpdate获取以前的状态

3 个答案: