为什么我的React组件会落后一步呢？

Question

在我的组件中，我有

  componentDidUpdate (prevProps, prevState) {
    console.log('here we roll', prevProps, prevState);
    if(this.props.searchQuery.length > 0 && prevProps.searchQuery != prevState.value) {
      this.setState({value: this.props.searchQuery})
    }
  }

因此，当父组件传递成为searchQuery的道具时，当前value的{​​{1}}落后了一步：

这就是我所看到的：

state

那么为什么前一个州的值为here we roll Object {placeholder: "Search all the Vidys", autoSearch: true, searchQuery: "", showLogo: false} Object {value: "a", hints: Array[0], isMobile: true, placeholder: "Type Something...", selectedSearch: false…} 且a为空呢？

Answer 1

这种情况正在发生，因为您在渲染之前将道具与渲染前的状态进行比较，而不是当前具有已渲染状态的当前道具。

理想情况下，您应该使用componentWillReceiveProps将道具传播到州：

  componentWillReceiveProps(nextProps, nextState) {
    if(nextProps.searchQuery != this.state.value) {
      this.setState({value: nextProps.searchQuery})
    }
  }