为什么我没有在反应中获得更新的道具价值

Question

您能告诉我为什么不能在反应中获得更新的道具价值吗？

这是我的代码 https://stackblitz.com/edit/react-redux-basic-counter-1e8gdh?file=shared/components/NavBar.js

在我的示例中，我有一个按钮-，单击它会减小值。我调度的动作值为decremented，但没有得到updated value

 handle=()=>{
    this.props.decrement();
    this.getCount();
  }

  getCount=()=>{
    const {counter}= this.props;
    console.log(counter);
  }

查看我的 console.log

预期输出为 -1

当前输出为0

为什么？当我点击-按钮

时，它将显示输出

Answer 1

原因是在控制台上打印值时，道具没有更新。更新道具后，react组件会重新渲染并显示计数器值。要检查您是否可以使用setTimeout。

  handle=()=>{
    this.props.decrement();
    setTimeout(this.getCount,10)
  }

如果要控制台记录该值，则可以生命周期。 您可以使用componentDidUpdate

   componentDidUpdate(prevProps) {
    if (this.props.counter !== prevProps.counter) {
      console.log(this.props.counter);
    }
  }

或componentWillReceiveProps（用于React版本<16）

  componentWillReceiveProps(newProps) {
  if( newProps.counter != this.props.counter ) {
    console.log(newProps.counter);
  }
}

或其他getDerivedStateFromProps（版本16 +）

  static getDerivedStateFromProps(nextProps, prevState) {
  if(nextProps.counter !== prevState.counter ) {
     console.log(nextProps.counter);
  }
}