未定义的 mapStateToProps React Redux

Posted 2023-02-22

【中文标题】未定义的 mapStateToProps React Redux

【英文标题】：Undefined mapStateToProps React Redux

【发布时间】：2019-01-15 19:19:48

【问题描述】：

嘿，我的 badgeNumber 经常以未定义的形式返回，我真的不明白为什么。感谢您的帮助。

我的减速机：

import OPEN_DROPDOWN, ADD_TASK, REMOVE_TASK, CLOSE_DROPDOWN from '../types/MenuTypes';

const initialState = 
  badgeNumber: 6,
  drop: false,
  tasks: [] 
;

export function reducerMenuEntry(startMenuState = initialState, action) 
  switch (action.type) 
    case OPEN_DROPDOWN:
      return Object.assign(, startMenuState, 
        ...startMenuState,
        drop: true
      );

    case CLOSE_DROPDOWN:
      return Object.assign(, startMenuState, 
        ...startMenuState,
        drop: false
      );

    case REMOVE_TASK:
    case ADD_TASK:
      return Object.assign(, startMenuState, 
        ...startMenuState,
        badgeNumber: action.badgeNumber,
        tasks: action.tasks
      );

    default:
      return initialState;
  

以及我尝试显示数据的组件：

import  connect  from 'react-redux';

class ToolsBar extends Component 
  render() 
    const badgeNumber = this.props;
    alert(badgeNumber);
    return (
      <Toolbar ...this.props.getActionsProps()>
        <ToolbarButton>
          <Badge badgeContent=badgeNumber />
        </ToolbarButton>
      </Toolbar>
    );
  ;
;

const mapStateToProps = state => 
  return 
    drop: state.drop,
    badgeNumber: state.badgeNumber
  ;
;

export default connect(mapStateToProps)(ToolsBar);

商店：

import  createStore, applyMiddleware  from 'redux';
import RootReducer from './reducers/RootReducer';
import thunk from 'redux-thunk';

export default () => 
  return createStore(RootReducer, applyMiddleware(thunk));
;

操作，但目前尚未完全实施。我想在通过操作修改它们之前显示静态值：

import  OPEN_DROPDOWN, ADD_TASK, REMOVE_TASK, CLOSE_DROPDOWN from "../types/MenuTypes";

export const open = () => 
  return  type: OPEN_DROPDOWN 
;

export const close = () => 
  return  type: CLOSE_DROPDOWN 
;

export function addTask(tasks, badgeNum)
  badgeNum++;
  return  type:ADD_TASK, tasks, badgeNum
;

export function removeTask (tasks, badgeNum)
  badgeNum--;
  return  type: REMOVE_TASK, tasks, badgeNum
;

组合减速机：

import combineReducers from 'redux';
import reducerUpdatePageEntry from './UpdatePageReducer';
import reducerSearchPageEntry from './SearchPageReducer';
import reducerSharedEntry from './SharedReducer';
import reducerUploadPageEntry from './UploadPageReducer';
import reducerMenuEntry from './MenuReducer';

export default combineReducers(
  updateStates: reducerUpdatePageEntry,
  displaySearchStates: reducerSearchPageEntry,
  sharedStates: reducerSharedEntry,
  uploadStates: reducerUploadPageEntry,
  menuStates: reducerMenuEntry
);

【问题讨论】：

该道具是通过异步操作从某个地方传来的吗？

对不起我对Redux不好我以为他们是通过商店传递的

好的，但是这个badgeNumber 值是从哪里来的？它在您的代码中是静态的还是来自 API？最好添加您的动作创建者代码。你有 thunk 中间件，所以可能有一个异步作业。

目前是静态的，我将更新评论，以便我也可以显示操作。

另外，请您的减速机。因为我们现在看不到你的state 是什么样子的。

【参考方案1】：

当您组合 reducer 时，您会在应用程序上创建多个状态。

您的 mapStateToProps 函数应如下所示：

const mapStateToProps = state => 
  return 
    drop: state.menuStates.drop,
    badgeNumber: state.menuStates.badgeNumber
  ;
;

---

还有一点：如果你已经在使用 object spread，你就不需要 Object.assign

像这样使用它：

return 
    ...startMenuState,
    drop: false
  );

【参考方案2】：

您在 mapStateToProps 中指定了错误的路径：

const mapStateToProps = state => 
  return 
    drop: state.menuStates.drop,
    badgeNumber: state.menuStates.badgeNumber
  ;
;

---

另外要小心

default:
  return initialState;

应该是这样的

default:
  return startMenuState;

因为如果您返回 initialState，则状态将随着每个未处理的操作而重置。