动作正在更新状态，但来自 mapStateToProps 的道具在组件中显示为未定义答案

【问题标题】：action is updating state, but props from mapStateToProps showing as undefined in Component动作正在更新状态，但来自 mapStateToProps 的道具在组件中显示为未定义
【发布时间】：2020-07-30 11:27:42
【问题描述】：

我正在编写一个简单的多项选择评估应用程序，让您单击答案，然后将其突出显示并添加到答案数组中。如果用户已经点击了其他选项，则从答案数组中删除它们。该操作已正确分派，但我在组件中使用的道具显示为未定义。我确定我已经把这个复杂化了（我是一个初学者），所以任何帮助都是值得的。我查看了大约 7 个其他 SO 帖子，但设置不同，它们不包括 mapStateToProps 和 mapDispatchToProps 中的多个项目（不确定这是否有区别。）

question.reducer.js

const INITIAL_STATE=
{
  answers:[],
  i:1,
  j:2,
  k:3,
  l:4,
  i_Checked:"",
  j_Checked:"",
  k_Checked:"",
  l_Checked:""
};
const questionReducer=(state=INITIAL_STATE,action)=>{
  switch(action.type){
case QuestionActionTypes.CLICK_I:
return{
  ...state,
  answers: changeI(state.i,state.j,state.k,state.l,state.answers),
  i_Checked:"checked",
  j_Checked:"",
  k_Checked:"",
  l_Checked:""
};

reducer 中的“changeI”是我的 utils.js 文件夹中的一个 util 函数，它为正确的 div 提供了一个“checked”的类名，如果它不包括在内，则将其添加到 answers 数组中，同时取出其他多项选择选项的答案数组。这一切都很好。让我抓狂的是 mapStateToProps 的道具！

有问题的组件

import React from 'react';
import './multiple-choice.styles.scss';
import {connect} from 'react-redux';
import {i_Clicked,j_Clicked,k_Clicked,l_Clicked} from '../../redux/question/question.actions';

const MultipleChoice= ({i_Checked,j_Checked, k_Checked, l_Checked, i_Clicked,j_Clicked,k_Clicked,l_Clicked,i,j,k,l})=>{

    let answerUrl="../../../public/images/answer";
  let formVisible="none";
  let mcVisible="";


  return(

  <div  style={{display: mcVisible}}>
        <div className='row'>
        //answer choice 1
        <div onClick={i_Clicked} className={`${i_Checked} column`} >
          <img alt="Possible Answer" src={`${answerUrl}${i}.png`}/>
         </div>

//answer choice 2
        <div onClick={j_Clicked} className={`${j_Checked} column`}>
          <img alt="Possible Answer" src={`${answerUrl}${j}.png`}/>
         </div>
        </div>

    <div className="row">
    //answer choice 3
    <div onClick={k_Clicked} className={`${k_Checked} column`}>
      <img alt="Possible Answer" src={`${answerUrl}${k}.png`}/>
    </div>

//asnwer choice 4
    <div  onClick={l_Clicked} className={`${l_Checked} column`}>
      <img alt="Possible Answer" src={`${answerUrl}${l}.png`}/>
    </div>
    </div>
</div>

  )
}
const mapDispatchToProps=dispatch=>({
    i_Clicked: ()=> dispatch(i_Clicked()),
    j_Clicked: ()=> dispatch(j_Clicked()),
    k_Clicked: ()=> dispatch(k_Clicked()),
    l_Clicked: ()=> dispatch(l_Clicked())

});

const mapStateToProps=state=>({

    i_Checked: state.i_Checked,
    j_Checked:state.j_Checked,
    k_Checked:state.k_Checked,
    l_Checked:state.l_Checked,
    i:state.i,
    j:state.j,
    k:state.k,
    l:state.l
});

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

当我单击问题的第一个答案选项（由 i、j、k、l 的字母“i”表示）时，它会显示在答案数组中，并且 i_checked 的值是“checked”，因此操作似乎有效，只是组件中没有加载道具？

【问题讨论】：

标签： reactjs redux react-redux

【解决方案1】：

你能发布你的根减速器文件吗？你使用的地方combineReducers

export default combineReducers({
  question: QuestionReducer,
});

如果这是您实现 mapStateToProps 的方式，则应更改如下

const mapStateToProps=state=>({
    i_Checked: state.question.i_Checked,
    j_Checked:state.question.j_Checked,
    k_Checked:state.question.k_Checked,
    l_Checked:state.question.l_Checked,
    i:state.question.i,
    j:state.question.j,
    k:state.question.k,
    l:state.question.l
});

state 将包含整个 redux store 和 question 填写与问题部分相关的参考数据

【讨论】：