reactjs - Redux 更新状态(在 reducer 中),但 React 组件不会重新渲染?
问题描述
这很奇怪,因为在我的减速器中,我确保我没有改变状态;此特定问题的常见问题。但是,我仍然不断收到这个问题。在应用程序的初始加载(使用 npm start)。在下面的照片中,您可以看到我在 return 语句之前 console.log 每个组件作为测试以查看组件是否呈现。但是尽管状态被更新,组件永远不会重新渲染......(我相信容器设置正确并且组件被调用。)
全部礼品展示
import OneGiftDisplay from './OneGiftDisplay.jsx';
const AllGiftsDisplay = (props) => {
console.log("LOADING");
let individualGifts = [];
for(let i = 0; i < props.giftList.length; i++) {
individualGifts.push(
<OneGiftDisplay
addGift = {props.addGift}
updatedGiftMessage = {props.updateGiftMessage}
setNewMessage = {props.setNewMessage}
totalVotes = {props.totalVotes}
/>
)
}
// let list = [<OneGiftDisplay/>, <OneGiftDisplay/>]
return (
<div className = "displayAllGifts">
{/* {console.log("~~~giftlist length", props.giftList.length)} */}
{individualGifts}
{/* {list} */}
</div>
)
};
export default AllGiftsDisplay;
礼品减少器
import * as types from '../constants/actionTypes.js';
const initialState = {
giftList: [],
lastGiftId: 10000,
totalVotes: 0,
newMessage: ''
};
const giftReducer = (state=initialState, action) => {
// let giftList;
// let setMessage;
switch(action.type) {
case types.ADD_GIFT:
let stateCopy = { ...state }; // shallow copy
// create the new gift object structure.
const giftStructure = {
// lastGiftId: stateCopy.lastGiftId,
newMessage: stateCopy.newMessage,
totalVotes: 0
};
// push the new gift onto the list.
stateCopy.giftList.push(giftStructure);
// console.log("giftList: ", stateCopy.giftList);s
// return updated state
return {
...stateCopy,
newMessage: ''
}
case types.SET_MESSAGE:
return {
...state, newMessage: action.payload,
}
case types.ADD_VOTE:
case types.DELETE_GIFT:
default:
return state;
}
};
export default giftReducer;
列表容器
import React, { Component } from 'react';
import { connect } from 'react-redux';
// import actions from action creators file
import * as actions from '../Actions/actions';
import AllGiftsDisplay from '../Components/AllGiftsDisplay.jsx';
import GiftCreator from '../Components/GiftCreator';
const mapStateToProps = (state) => ({
lastGiftId: state.gifts.lastGiftId,
giftList : state.gifts.giftList,
totalVotes: state.gifts.totalVotes,
setNewMessage: state.gifts.setNewMessage
});
//pass in text into update
const mapDispatchToProps = dispatch => ({
updateGiftMessage: (e) => {
console.log(e.target.value);
dispatch(actions.setMessage(e.target.value));
},
addGift: (e) => {
e.preventDefault();
console.log("actions: ", actions.addGift);
dispatch(actions.addGift());
}
});
class ListContainer extends Component {
constructor(props) {
super(props);
}
render() {
return(
<div className="All-Lists">
<h1>LIST CONTAINER!</h1>
<AllGiftsDisplay giftList = {this.props.giftList} addGift={this.props.addGift} setNewMessage={this.props.setNewMessage} totalVotes = {this.props.totalVotes} lastGiftId = {this.props.lastGiftId}/>
<GiftCreator setNewMessage={this.props.setNewMessage} updateGiftMessage={this.props.updateGiftMessage} addGift={this.props.addGift}/>
</div>
);
}
}
export default connect(mapStateToProps, mapDispatchToProps)(ListContainer);
解决方案
秘诀是避免变异giftList
。
const giftReducer = (state=initialState, action) => {
// let giftList;
// let setMessage;
switch(action.type) {
case types.ADD_GIFT:
// create the new gift object structure.
const giftStructure = {
// lastGiftId: stateCopy.lastGiftId,
newMessage: stateCopy.newMessage,
totalVotes: 0
};
return {
...state,
giftList: [...state.giftList, giftStructure],
newMessage: ''
}
case types.SET_MESSAGE:
return {
...state, newMessage: action.payload,
}
case types.ADD_VOTE:
case types.DELETE_GIFT:
default:
return state;
}
};
为了更好地理解为什么不需要改变数组,请考虑以下示例:
const arr = [1, 2, 3];
const b = { a: arr };
const c = { ...b };
c.a.push(4);
console.log(arr === c.a); // outputs true
推荐阅读
- java - 根据 JSON 模式验证 JSON(在 Java 中)
- javascript - 如何用变量名添加数字?
- typo3 - 为什么 TYPO3 在 Core 中没有页面模型?
- java - 带有 Postgres 问题的 Spring Data:如何将时区参数传递到本机查询中?
- react-native - 如何在本地反应中使用非地理地图?
- ios - 由于对调度组的不平衡调用导致不明显的崩溃
- flutter - 如何在 Flutter 中使用 Dio 处理超时错误?
- xpath - 选择没有跨度xpath的div(文本)
- python - 将自定义停用词附加到 nltk.corpus 中的默认停用词列表,并使用 lambda 从数据帧中的系列中删除停用词
- angularjs - Angular:翻译功能无法从其他组件访问