Question

我有一个简单的商店，该商店的初始状态为channelName属性，目前有一个简单的化简器来使用输入来更新频道名称。

这是我的Store.js：

import { createStore } from "redux";
import reducer from "./Reducer";

const store = createStore(reducer);

export default store;

这就是我的Reducer.js中的内容

const initialState = {
  channelName: "Flying Hawk",
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case "UPDATE_CHANNEL_NAME":
      return {
        ...state,
        channelName: action.payload.channelName,
      };

    default:
      break;
  }
};

export default reducer;

正在使用商店的两个组件如下：

App.js

import React from "react";
import Screens from "./components/Screens";
import { connect } from "react-redux";

  return (
    <div className="app">
      <h3 className="section">App</h3>
      <h1>Channel: {channelName}</h1>
      <Screens />
    </div>
  );
}

const mapStateToProps = (state) => {
  return {
    channelName: state.channelName,
  };
};

export default connect(mapStateToProps)(App);

Settings.js

import React from "react";
import { connect } from "react-redux";
import Navbar from "./Navbar";
import Content from "./Content";
import Footer from "./Footer";

function Settings({ channelName, updateChannelName, user }) {
  return (
    <div
      className="settings"
      style={{
        display: "flex",
        flexDirection: "column",
      }}
    >
      <h3 className="section">Settings</h3>
      <Navbar channelName={channelName} user={user} />
      <div style={{ height: "100%" }}>
        <Content
          channelName={channelName}
          updateChannelName={updateChannelName}
        />
      </div>
      <Footer channelName={channelName} user={user} />
    </div>
  );
}

const mapStateToProps = (state) => {
  return {
    channelName: state.channelName,
  };
};

const mapDispatchToProps = (dispatch) => ({
  updateChannelName: (value) =>
    dispatch({
      type: "UPDATE_CHANNEL_NAME",
      payload: { channelName: value },
    }),
});

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

据我所知。当我运行我的应用程序时，出现以下错误：

×
TypeError: Cannot read property 'channelName' of undefined
Function.mapStateToProps [as mapToProps]
src/App.js:37
  34 | 
  35 | const mapStateToProps = (state) => {
  36 |   return {
> 37 |     channelName: state.channelName,
  38 |   };
  39 | };
  40 |

我试图追溯我的代码，但似乎在这里找不到问题。我想念什么？

Answer 1

减速器应始终返回状态。

您只是break;上的default。

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case "UPDATE_CHANNEL_NAME":
      return {
        ...state,
        channelName: action.payload.channelName,
      };

    default:
      return state;
  }
};

React / Redux：获取属性未定义的初始状态

1 个答案: