Javascript React reducer可以工作，但一旦浏览网页就会变得不明确

由于某种原因，当我第一次加载页面时，reducer函数和状态正确执行，您可以访问数据。一旦您切换到另一个页面，然后返回到上一个页面，它会显示状态未定义。这是图片

下面文件中的代码如下所示

import React, { Component } from "react";
import Hook from "../../hooks/display";
import { connect } from "react-redux";
import * as actionTypes from "../../store/actions";

import "./main.css";

class Main extends Component {
  componentDidMount() {
    console.log(this.props.stateName);
    this.props.console_inside();
    console.log("hey");
  }

  render() {

    return (
      <div>
        <h1>The container view (page)</h1>
        <Hook />
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    stateName: state.inside_reducer
  };
};

const mapDispatchToProps = dispatch => {
  return {
    console_inside: () => dispatch({ type: actionTypes.DO_SOMETHING_1 })
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Main);

问题是

1） 为什么第二次进入页面时会显示未定义

附言：不确定它是否重要，但只是以防万一问题就在这里 在我的index.js中

从“/serviceWorker”导入*为serviceWorker；
从“react router dom”导入{BrowserRouter}；
从“redux”导入{createStore}；
从“react redux”导入{Provider}；
从“/store/reducer”导入减速机；
const store=createStore（reducer）；
常量应用=(
);
render（app，document.getElementById（“根”）；

您永远不会返回您的状态

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case actionTypes.DO_SOMETHING_1:
      console.log(state.inside_reducer);
      return state ; // <==== You must return your state instead of 1
    case actionTypes.DO_SOMETHING_2:
      return state ; // <==== You must return your state instead of 1
  }
  return state;
};

const reducer=（state=initialState，action）=>{
开关（动作类型）{
case actionTypes.DO_SOMETHING_1：
console.log（state.inside_reducer）；
返回状态；//您永远不会返回您的状态

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case actionTypes.DO_SOMETHING_1:
      console.log(state.inside_reducer);
      return state ; // <==== You must return your state instead of 1
    case actionTypes.DO_SOMETHING_2:
      return state ; // <==== You must return your state instead of 1
  }
  return state;
};

const reducer=（state=initialState，action）=>{
开关（动作类型）{
case actionTypes.DO_SOMETHING_1：
console.log（state.inside_reducer）；
返回状态；//我很确定这是因为您将状态设置为1，而不是返回您想要的新状态

1.内部减速器实际上是未定义的

减速机返回新状态，因此您正在覆盖它。我不确定您到底想要实现什么，但请尝试以下方法

return {
  ...state,
  inside_reducer: 'reduced'
}

相反，在这两种情况下都是如此。
我敢肯定这是因为您将状态设置为1，而不是返回您想要的新状态

1.内部减速器实际上是未定义的

减速机返回新状态，因此您正在覆盖它。我不确定您到底想要实现什么，但请尝试以下方法

return {
  ...state,
  inside_reducer: 'reduced'
}

相反，在这两种情况下。
问题1的答案是将`console.log（'hey'）放在componentDidMount（）中，这样可以解决执行过度的问题，但是当你浏览页面时，如果没有定义，又有什么用呢？问题1的答案是将`console.log（'hey'）放在componentDidMount（）中这解决了执行过度的问题，但是当你浏览页面时，undefined有什么用呢？