javascript - React reducer 可以工作，但是一旦浏览网页就会变得未定义

Question

由于某种原因，当我第一次加载页面时，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);

在我的 reducer.js 中

import * as actionTypes from "./actions";

const initialState = {
  persons: [],
  inside_reducer: "I am inside of a reducer"
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case actionTypes.DO_SOMETHING_1:
      console.log(state.inside_reducer);
      return 1;
    case actionTypes.DO_SOMETHING_2:
      return 1;
  }
  return state;
};

export default reducer;

问题是

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

PS：不确定它是否重要，但以防万一问题出在我的 index.js 中

import * as serviceWorker from "./serviceWorker";
import { BrowserRouter } from "react-router-dom";
import { createStore } from "redux";
import { Provider } from "react-redux";
import reducer from "./store/reducer";

const store = createStore(reducer);

const app = (
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>
);
ReactDOM.render(app, document.getElementById("root"));

标签： javascriptreactjsredux

Answer 1

你永远不会返回你的状态

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;
};