javascript - 为什么我的组件中的状态似乎没有更新？

Question

我是 Redux 新手，尽管我之前已经用过 React 一些工作。

我正在使用 tutorial在我的应用程序中测试使用 Actions、Action Creators 和 Reducers，到目前为止，我认为我已经完成了大约 90%。

  componentDidMount() {
    this.props.levelUp();
    this.props.levelUp();
    this.props.levelUp();
    this.props.levelUp();
    this.props.levelUp();
    console.log("final prop");
    console.log(this.props);
  }

const mapStateToProps = (state) => {
  console.log("state general");
  console.log(state.general);
  return {
    general: state.general,
  };
};

两个控制台日志都会在此处触发，并且它们会随着每次升级操作而递增，或随着每次降级操作而递减。

function mapDispatchToProps(dispatch) {
  return bindActionCreators(generalActions, dispatch);
}

这是在我的 reducer 文件中:

export default (state = 1, action) => {
  console.log(state);
    switch (action.type) {
      case 'LEVEL_UP':
      console.log(action.type);
        return state + 1;
      case 'LEVEL_DOWN':
          return state - 1;
    }
    return state;
  };

我的控制台日志似乎捕获了正确的增量 - 每次我调用 this.props.levelUp() 时，reducer 中的值都会增加一

但是，当我在 componentDidMount() 中对 props 进行最终记录时，该值为 1。

这是为什么呢？我不是一直在保存数据吗？还有其他原因导致我没有按照我设想的方式返回状态吗？

Answer 1

componentDidMount 将在组件安装后被触发。之后您的操作就会被触发，因此为什么您应该在 componentDidUpdate() 或 static getDerivedStateFromProps() 之类的内容中执行 console.log() 语句.

有关 React 生命周期的更多信息:https://reactjs.org/docs/state-and-lifecycle.html

问候