[英]Even after redux state update mapStateToProps not returning updated props to components in react
我是redux的新手。 我正在尝试将redux与我的react项目集成在一起。 我面临的问题是，即使状态在React存储库中进行了更新，提供给组件的mapStateToProps函数也不会返回更新的props.reduce函数会返回正确的函数。 而且mapDispatchToProps函数也可以正常工作。 下面是我的代码。 //QuestionPagination.js
import React, { Component } from 'react';
import {Table} from 'semantic-ui-react';
import {setNewActiveIndex} from '../actions/index';
import {connect} from 'react-redux';
/*
required props
activeIndex={this.state.currentQuestionIndex}
function setActiveIndex actionDispatcher
unAttemptedQuestions={this.state.unAttemptedQuestions}
*/
const mapDispatchToProps = (dispatch)=>{
return {
setActiveIndex: (index)=>dispatch(setNewActiveIndex(index))
};
}
const mapStateToProps = state=>{
return {
activeIndex: state.currentQuestionIndex,
unAttemptedQuestions: state.unAttemptedQuestions
}
}
const QuestionPaginationGroup=(props)=>{
function onClickHandler(e){
console.log('setting active index value: ', e);
props.setActiveIndex(e);
}
console.log('current props: ', JSON.stringify(props));
return (<Table celled selectable>
<Table.Body>
<Table.Row>
<Table.Cell error={props.unAttemptedQuestions.indexOf(0)==-1
? false : true } active={props.activeIndex==0 ? true : false}
onClick={()=>onClickHandler(0)}>1</Table.Cell>
<Table.Cell error={props.unAttemptedQuestions.indexOf(1)==-1
? false : true } active={props.activeIndex==1 ? true : false} onClick=
{()=>onClickHandler(1)}>2</Table.Cell>
<Table.Cell error={props.unAttemptedQuestions.indexOf(2)==-1
? false : true } active={props.activeIndex==2 ? true : false} onClick=
{()=>onClickHandler(2)}>3</Table.Cell>
<Table.Cell error={props.unAttemptedQuestions.indexOf(3)==-1
? false : true } active={props.activeIndex==3 ? true : false} onClick=
{()=>onClickHandler(3)}>4</Table.Cell>
<Table.Cell error={props.unAttemptedQuestions.indexOf(4)==-1
? false : true } active={props.activeIndex==4 ? true : false}
onClick={()=>onClickHandler(4)}>5</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell error={props.unAttemptedQuestions.indexOf(5)==-1
? false : true } active={props.activeIndex==5 ? true : false}
onClick={()=>onClickHandler(5)}>6</Table.Cell>
<Table.Cell error={props.unAttemptedQuestions.indexOf(6)==-1
? false : true } active={props.activeIndex==6 ? true : false} onClick=
{()=>onClickHandler(6)}>7</Table.Cell>
<Table.Cell error={props.unAttemptedQuestions.indexOf(7)==-1
? false : true } active={props.activeIndex==7 ? true : false} onClick=
{()=>onClickHandler(7)}>8</Table.Cell>
<Table.Cell error={props.unAttemptedQuestions.indexOf(8)==-1
? false : true } active={props.activeIndex==8 ? true : false} onClick=
{()=>onClickHandler(8)}>9</Table.Cell>
<Table.Cell error={props.unAttemptedQuestions.indexOf(9)==-1
? false : true } active={props.activeIndex==9 ? true : false} onClick=
{()=>onClickHandler(9)}>10</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell error=
{props.unAttemptedQuestions.indexOf(10)==-1 ? false : true } active=
{props.activeIndex==10 ? true : false} onClick=
{()=>onClickHandler(10)}>11</Table.Cell>
<Table.Cell error=
{props.unAttemptedQuestions.indexOf(11)==-1 ? false : true } active=
{props.activeIndex==11 ? true : false} onClick=
{()=>onClickHandler(11)}>12</Table.Cell>
<Table.Cell error=
{props.unAttemptedQuestions.indexOf(12)==-1 ? false : true } active=
{props.activeIndex==12 ? true : false} onClick={()=>onClickHandler(12)}>13</Table.Cell>
<Table.Cell error={props.unAttemptedQuestions.indexOf(13)==-1 ? false : true } active={props.activeIndex==13 ? true : false} onClick={()=>onClickHandler(13)}>14</Table.Cell>
<Table.Cell error={props.unAttemptedQuestions.indexOf(14)==-1 ? false : true } active={props.activeIndex==14 ? true : false} onClick={()=>onClickHandler(14)}>15</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell error={props.unAttemptedQuestions.indexOf(15)==-1 ? false : true } active={props.activeIndex==15 ? true : false} onClick={()=>onClickHandler(15)}>16</Table.Cell>
<Table.Cell error={props.unAttemptedQuestions.indexOf(16)==-1 ? false : true } active={props.activeIndex==16 ? true : false} onClick={()=>onClickHandler(16)}>17</Table.Cell>
<Table.Cell error={props.unAttemptedQuestions.indexOf(17)==-1 ? false : true } active={props.activeIndex==17 ? true : false} onClick={()=>onClickHandler(17)}>18</Table.Cell>
<Table.Cell error={props.unAttemptedQuestions.indexOf(18)==-1 ? false : true } active={props.activeIndex==18 ? true : false} onClick={()=>onClickHandler(18)}>19</Table.Cell>
<Table.Cell error={props.unAttemptedQuestions.indexOf(19)==-1 ? false : true } active={props.activeIndex==19 ? true : false} onClick={()=>onClickHandler(19)}>20</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell error={props.unAttemptedQuestions.indexOf(20)==-1 ? false : true } active={props.activeIndex==20 ? true : false} onClick={()=>onClickHandler(20)}>21</Table.Cell>
<Table.Cell error={props.unAttemptedQuestions.indexOf(21)==-1 ? false : true } active={props.activeIndex==21 ? true : false} onClick={()=>onClickHandler(21)}>22</Table.Cell>
<Table.Cell error={props.unAttemptedQuestions.indexOf(22)==-1 ? false : true } active={props.activeIndex==22 ? true : false} onClick={()=>onClickHandler(22)}>23</Table.Cell>
<Table.Cell error={props.unAttemptedQuestions.indexOf(23)==-1 ? false : true } active={props.activeIndex==23 ? true : false} onClick={()=>onClickHandler(23)}>24</Table.Cell>
<Table.Cell error={props.unAttemptedQuestions.indexOf(24)==-1 ? false : true } active={props.activeIndex==24 ? true : false} onClick={()=>onClickHandler(24)}>25</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell error={props.unAttemptedQuestions.indexOf(25)==-1 ? false : true } active={props.activeIndex==25 ? true : false} onClick={()=>onClickHandler(25)}>26</Table.Cell>
<Table.Cell error={props.unAttemptedQuestions.indexOf(26)==-1 ? false : true } active={props.activeIndex==26 ? true : false} onClick={()=>onClickHandler(26)}>27</Table.Cell>
<Table.Cell error={props.unAttemptedQuestions.indexOf(27)==-1 ? false : true } active={props.activeIndex==27 ? true : false} onClick={()=>onClickHandler(27)}>28</Table.Cell>
<Table.Cell error={props.unAttemptedQuestions.indexOf(28)==-1 ? false : true } active={props.activeIndex==28 ? true : false} onClick={()=>onClickHandler(28)}>29</Table.Cell>
<Table.Cell error={props.unAttemptedQuestions.indexOf(29)==-1 ? false : true } active={props.activeIndex==29 ? true : false} onClick={()=>onClickHandler(29)}>30</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell error={props.unAttemptedQuestions.indexOf(30)==-1 ? false : true } active={props.activeIndex==30 ? true : false} onClick={()=>onClickHandler(30)}>31</Table.Cell>
<Table.Cell error={props.unAttemptedQuestions.indexOf(31)==-1 ? false : true } active={props.activeIndex==31 ? true : false} onClick={()=>onClickHandler(31)}>32</Table.Cell>
<Table.Cell error={props.unAttemptedQuestions.indexOf(32)==-1 ? false : true } active={props.activeIndex==32 ? true : false} onClick={()=>onClickHandler(32)}>33</Table.Cell>
<Table.Cell error={props.unAttemptedQuestions.indexOf(33)==-1 ? false : true } active={props.activeIndex==33 ? true : false} onClick={()=>onClickHandler(33)}>34</Table.Cell>
<Table.Cell error={props.unAttemptedQuestions.indexOf(34)==-1 ? false : true } active={props.activeIndex==34 ? true : false} onClick={()=>onClickHandler(34)}>35</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell error={props.unAttemptedQuestions.indexOf(35)==-1 ? false : true } active={props.activeIndex==35 ? true : false} onClick={()=>onClickHandler(35)}>36</Table.Cell>
<Table.Cell error={props.unAttemptedQuestions.indexOf(36)==-1 ? false : true } active={props.activeIndex==36 ? true : false} onClick={()=>onClickHandler(36)}>37</Table.Cell>
<Table.Cell error={props.unAttemptedQuestions.indexOf(37)==-1 ? false : true } active={props.activeIndex==37 ? true : false} onClick={()=>onClickHandler(37)}>38</Table.Cell>
<Table.Cell error={props.unAttemptedQuestions.indexOf(38)==-1 ? false : true } active={props.activeIndex==38 ? true : false} onClick={()=>onClickHandler(38)}>39</Table.Cell>
<Table.Cell error={props.unAttemptedQuestions.indexOf(39)==-1 ? false : true } active={props.activeIndex==39 ? true : false} onClick={()=>onClickHandler(39)}>40</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell error={props.unAttemptedQuestions.indexOf(40)==-1 ? false : true } active={props.activeIndex==40 ? true : false} onClick={()=>onClickHandler(40)}>41</Table.Cell>
<Table.Cell error={props.unAttemptedQuestions.indexOf(41)==-1 ? false : true } active={props.activeIndex==41 ? true : false} onClick={()=>onClickHandler(41)}>42</Table.Cell>
<Table.Cell error={props.unAttemptedQuestions.indexOf(42)==-1 ? false : true } active={props.activeIndex==42 ? true : false} onClick={()=>onClickHandler(42)}>43</Table.Cell>
<Table.Cell error={props.unAttemptedQuestions.indexOf(43)==-1 ? false : true } active={props.activeIndex==43 ? true : false} onClick={()=>onClickHandler(43)}>44</Table.Cell>
<Table.Cell error={props.unAttemptedQuestions.indexOf(44)==-1 ? false : true } active={props.activeIndex==44 ? true : false} onClick={()=>onClickHandler(44)}>45</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell error={props.unAttemptedQuestions.indexOf(45)==-1 ?
false : true } active={props.activeIndex==45 ? true : false}
onClick={()=>onClickHandler(45)}>46</Table.Cell>
<Table.Cell error=
{props.unAttemptedQuestions.indexOf(46)==-1 ? false : true } active=
{props.activeIndex==46 ? true : false} onClick=
{()=>onClickHandler(46)}>47</Table.Cell>
<Table.Cell error=
{props.unAttemptedQuestions.indexOf(47)==-1 ? false : true } active=
{props.activeIndex==47 ? true : false} onClick=
{()=>onClickHandler(47)}>48</Table.Cell>
<Table.Cell error=
{props.unAttemptedQuestions.indexOf(48)==-1 ? false : true } active=
{props.activeIndex==48 ? true : false} onClick=
{()=>onClickHandler(48)}>49</Table.Cell>
<Table.Cell error=
{props.unAttemptedQuestions.indexOf(49)==-1 ? false : true } active=
{props.activeIndex==49 ? true : false} onClick=
{()=>onClickHandler(49)}>50</Table.Cell>
</Table.Row>
</Table.Body>
</Table>)
}
const QuestionPagination = connect(mapStateToProps,
mapDispatchToProps)(QuestionPaginationGroup);
export default QuestionPagination;
//reducers.js
import {GET_TEST_DATA, SET_NEW_ACTIVE_INDEX,
SET_CURRENT_QUESTION_SELECTED_OPTION,
SET_QUESTION_ATTEMPTED_OR_UNATTEMPTED_STATUS} from
'../constants/action-types';
import fetchData from '../services/getTestData';
const initialState = {
questions: [],
currentQuestionIndex: 0,
unAttemptedQuestions: [],
isCurrentQuestionAttemped: true,
answers:{},
isTestSubmitted: false
}
const rootReducer = (state=initialState, action)=>{
console.log('inside the rootReducer');
let newState = '';
switch(action.type){
case GET_TEST_DATA:
// const data = await fetchData();
console.log('returning test data');
const data = [
{
"id": 1,
"ques": "Can you hear what he is .......?",
"opt1": "saying",
"opt2": "speaking",
"opt3": "telling",
"opt4": "talking",
"opt5": "None of these",
"ans": "saying",
"body": null
},
{
"id": 2,
"ques": "She hasn't come home ........",
"opt1": "still",
"opt2": "already",
"opt3": "yet",
"opt4": "till",
"opt5": "None of theses",
"ans": "yet",
"body": null
}
];
newState = Object.assign(state, {questions:data});
console.log('new state from the reducer: ',
JSON.stringify(newState));
return newState;
break;
case SET_NEW_ACTIVE_INDEX:
if(state.questions.length>action.payload.index){
console.log('setActiveIndex called: ');
console.log('state from the reducer: ',
JSON.stringify(state));
const isCurrentQuestionAttemped=
state.unAttemptedQuestions.indexOf(action.payload.index)==-1 ? true:
false;
console.log('isCurrentQuestionAttemped: ',
isCurrentQuestionAttemped);
newState = Object.assign(state,
{currentQuestionIndex: action.payload.index,
isCurrentQuestionAttemped: isCurrentQuestionAttemped});
console.log('setting new active index: ',
action.payload.index);
return newState;
}
console.log('new active index can\'t be set');
return state;
break;
case SET_CURRENT_QUESTION_SELECTED_OPTION:
console.log(`inside the saveCurrentQuestionSelectedOption
${action.payload.index} and ${action.payload.value}: `);
newState = Object.assign({}, state);
newState.answers[action.payload.index] =
action.payload.value;
return newState;
break;
case SET_QUESTION_ATTEMPTED_OR_UNATTEMPTED_STATUS:
const unAttemptedQuestions = state.unAttemptedQuestions;
console.log('current state: ', JSON.stringify(state));
if(state.isCurrentQuestionAttemped){
unAttemptedQuestions.push(state.currentQuestionIndex);
newState = Object.assign(state,
{unAttemptedQuestions:unAttemptedQuestions,isCurrentQuestionAttemped:
false});
}
else{
unAttemptedQuestions.splice(state.activeIndex, 1);
newState = Object.assign(state,
{unAttemptedQuestions:unAttemptedQuestions,
isCurrentQuestionAttemped:true});
}
return newState;
break;
default:
return state;
}
};
export default rootReducer;
//store.js
import { createStore } from "redux";
import rootReducer from "../reducers/index";
const store = createStore(rootReducer);
export default store;
设置newState的方式不是问题吗？
代替
newState = Object.assign(state, ...)
尝试
newState = Object.assign({}, state, ...)
这样，newState将成为一个新对象
React / Redux：mapStateToProps实际上并没有将状态映射到props
[英]React / Redux: mapStateToProps not actually mapping state to props
反应 redux mapStateToProps - 无法访问 state 作为道具
[英]React redux mapStateToProps - cannot access state as props
为什么redux mapStateToProps即使商店已更新也不会更新组件道具？
[英]Why redux mapStateToProps doesn't update component props even if store is updated?
React & Redux：即使使用 mapStateToProps，组件状态也不会更新
[英]React & Redux: State of component is not updating even with mapStateToProps
React Redux：即使mapStateToProps是
[英]React Redux: View not getting updated even though mapStateToProps is
mapStateToProps如何在react-redux实现中接收更新的状态
[英]How can mapStateToProps receive the updated state in react-redux implementation
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.