我目前正在学习this个教程.我在下面的代码中遇到了一个小问题,涉及mapStateToProps:

import React from 'react';
import Voting from './voting';
import {connect} from 'react-redux';

const mapStateToProps = (state) => {
  return {
    pair: state.getIn(['vote','pair']),
    winner: state.get('winner')
  };
}

const VotingContainer = connect(mapStateToProps)(Voting);
export default VotingContainer;

下面是导入的投票组件:

import React from 'react';
import Vote from './Vote';
import Winner from './winner';

const Voting = ({pair,vote,hasVoted,winner}) =>
  <div>
    {winner ? <Winner winner={winner}/>  :
      <Vote pair={pair} vote={vote} hasVoted={hasVoted}/>
    }
  </div>

export default Voting;

它应该渲染pairprops 上的两个按钮.voteprops 是一个单击即可执行的功能,如果为true,hasVoted将禁用按钮,winner仅呈现winner组件,如图所示.

该状态应该是一个不可变的JS映射,如下所示:

Map({
  vote:{
    pair:List.of('Movie A','Movie B')
  }
});

相反,我得到了一个错误,说状态在状态中是未定义的.排队.

设置状态的代码位于索引中:

const store = createStore(reducer);

const socket = io(document.location.protocol + '//' + document.location.hostname + ':8090');
socket.on('state', state => store.dispatch({
  type: 'SET_STATE',
  state
}));

我在设置后记录了store.getState()次,和预期的一样,但在mapStateToProps中记录了undefined次.我还在上面的上下文中记录了state变量,它也是预期的.

我还将状态设置为正常状态,它出人意料地有效!:

store.dispatch({
  type: 'SET_STATE',
  state: {
    vote: {
      pair: ['Movie A', 'Movie B']
    }
  }
});

上面的state值正是从服务器接收到的值

最后,我的减速机是这样的:

import React from 'react';
import {Map, fromJS} from 'immutable';

const reducer = (state = Map(), action) => {
  switch (action.type) {
    case 'SET_STATE':
      return state.merge(action.state);
  }
}

export default reducer;

我做错了什么?

编辑:我意识到在store.dispatch()之后没有人叫mapStateToProps.我看了docs个,可能是因为mapStateToProps没有被调用,而且它不是其中之一.

推荐答案

在switch语句中没有默认操作.这就是为什么即使您在reducer params中提到了初始状态,undefined也会作为store initial state返回

import React from 'react';
import {Map,fromJS} from 'immutable';

const reducer = (state = Map() ,action) => {
  switch(action.type){
    case 'SET_STATE': return state.merge(action.state);
    default:
      return state;
  }
}

export default reducer;

添加默认语句将解决此问题:)

Reactjs相关问答推荐

获取点击的国家/地区名称react 映射

如何在REACTIVE js中动态添加或删除输入字段?

如何从Reaction-Arborist树获取排序数据

在Reaction中的第一次装载时,Use Effect返回空数组

Reaction路由-如何在布局路由内呈现&q;/:id&q;路由

React路由dom布局隐藏内容

关于forwardRef,我可以';我不理解第二个用例

使用 React + Vite 范围化 CSS

我如何使用 React toastify (Promise) toast 和邮箱 js

Firebase查询返回随机用户数据,而不是过滤后的用户数据

在遵循 react-navigation 的官方文档时收到警告消息

React Native应用如何订阅Supabase的实时数据?

ReactJS:在导航栏中使用 Select inside Link 组件时如何避免重定向?

虽然通过了身份认证,但并没有导航到请求的页面

如何在react 中正确销毁上下文?

添加 React/Redux 组件模板的 VS Code 扩展

使用 useRef(uuid()) 的目的是什么?

当父组件重新渲染时做出react ,我失go 了子状态.我错过了什么?

React 检测哪些 props 在 useEffect 触发器上发生了变化

gtag:为什么谷歌分析即使没有被授权也会收集数据