Question

我的应用程序是使用React 16.3.X创建的，this.props方法需要getDerivedStateFromProps()。

例如：

static getDerivedStateFromProps(nextProps, prevState) {
  console.log(this.props);  // `this` is not defined
  if (nextProps.id !== this.props.id) {
    // do something...
  }
  return null;
}

显然，this方法中未定义static，但我需要知道有this.props getDerivedStateFromProps()中有ConcurrentDictionary<string, int> word = new ConcurrentDictionary<string, int>();的方法吗？

Answer 1

您无法访问this.props内的getDerivedStateFromProps功能。如果您想在函数内部访问一些以前的道具（比如用于比较），那么您可以在state内镜像这些值。然后，您可以将nextProps与state中存储的值进行比较

static getDerivedStateFromProps(nextProps, prevState) {
  if (nextProps.id !== prevState.id) {
    // prevState.id represent the prevProps.id
    return {id: nextProps.id};
  }
  return null;
}

结帐：https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props

Answer 2

getDerivedStateFromProps是componentWillReceiveProps的超集，您无法在其中获得this.props。如果你需要它，你做错了，因为它是反模式。如果您需要它，您仍然可以使用不推荐使用的方法https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops，因为它将被删除。请发布您需要的代码，因为您正在引入反模式。

Answer 3

您可以将当前道具存储在州内。类似于：

class App extends Component {
  state = {
    prevProps: []
  };

  static getDerivedStateFromProps(nextProps, prevState) {
    let stateToBeReturned = null;
    if (prevState.prevProps !== nextProps.data) {
      stateToBeReturned =  {
        ...prevState,
        prevProps: nextProps.data,
      }
    }
    return stateToBeReturned;
  }
}

访问getDerivedStateFromProps方法中的先前道具

3 个答案: