Reactjs Redux更新状态（在还原器中），但React组件不重新渲染？

这是非常奇怪的，因为在我的还原程序中，我确保我没有突变状态；此特定问题的一个常见问题。然而，我仍然不断地得到这个问题。在应用程序的初始加载时（使用npm start）。在下面的照片中，您可以看到I console.log在return语句之前记录每个组件，以测试组件是否呈现。但是，尽管状态正在更新，组件永远不会重新呈现。。。。（我确信容器已正确设置，组件已调用。）

所有礼物显示

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;

ListContainer

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);

import React，{Component}来自'React'；
从'react redux'导入{connect}；
//从动作创建者文件导入动作
从“../actions/actions”导入*作为操作；
从“../Components/AllGiftsDisplay.jsx”导入AllGiftsDisplay；
从“../Components/GiftCreator”导入GiftCreator；
常量mapStateToProps=（状态）=>({
lastgitd:state.gifts.lastgitd，
礼物列表：state.gifts.giftList，
TotalVoces:state.gifts.TotalVoces，
setNewMessage:state.gifts.setNewMessage
});
//将文本传递到更新中
const mapDispatchToProps=调度=>({
updateGiftMessage：（e）=>{
console.log（如target.value）；
分派（actions.setMessage（例如target.value））；
},
addGift：（e）=>{
e、 预防默认值（）；
log（“actions:，actions.addGift”）；
分派（actions.addGift（））；
}
});
类ListContainer扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
列表容器！
);
}
}
导出默认连接（mapStateToProps、mapDispatchToProps）（ListContainer）；

秘诀是避免变异

礼物清单

const giftReducer=（state=initialState，action）=>{
//让送礼者；
//让我们传递信息；
开关（动作类型）{
案例类型。添加礼物：
//创建新的礼品对象结构。
常数giftStructure={
//lastGiftId:stateCopy.lastGiftId，
newMessage:stateCopy.newMessage，
总票数：0
};
返回{
……国家，
礼品列表：[…state.giftList，giftStructure]，
新消息：“”
}
case types.SET_消息：
返回{
…状态，新消息：action.payload，
}
案例类型。添加投票：
案例类型。删除礼物：
违约：
返回状态；
}
};

<> >为了更好地理解为什么不需要改变数组，请考虑这个例子：

const arr=[1,2,3]；
常数b={a:arr}；
常数c={…b}；
c、 a.推（4）；
console.log（arr==c.a）；//输出为真

秘诀是避免变异

礼物清单

const giftReducer=（state=initialState，action）=>{
//让送礼者；
//让我们传递信息；
开关（动作类型）{
案例类型。添加礼物：
//创建新的礼品对象结构。
常数giftStructure={
//lastGiftId:stateCopy.lastGiftId，
newMessage:stateCopy.newMessage，
总票数：0
};
返回{
……国家，
礼品列表：[…state.giftList，giftStructure]，
新消息：“”
}
case types.SET_消息：
返回{
…状态，新消息：action.payload，
}
案例类型。添加投票：
案例类型。删除礼物：
违约：
返回状态；
}
};

<> >为了更好地理解为什么不需要改变数组，请考虑这个例子：

const arr=[1,2,3]；
常数b={a:arr}；
常数c={…b}；
c、 a.推（4）；
console.log（arr==c.a）；//输出为真

我仍然会遇到同样的错误：/。它不会重新呈现组件，但在技术上会更新状态。出于好奇，您是否可以尝试在

ListContainer

的

render（）方法中执行
console.log（this.props.giftList）
，然后尝试添加礼物？添加后你能看到一条新的控制台消息吗？等等，它确实起作用了！我只需要重新启动我的构建。很抱歉，非常感谢：）别担心，我喜欢你的昵称：）我还是会犯同样的错误：/。它不会重新呈现组件，但在技术上会更新状态。出于好奇，您是否可以尝试在
ListContainer
的
render（）方法中执行
console.log（this.props.giftList）
，然后尝试添加礼物？添加后你能看到一条新的控制台消息吗？等等，它确实起作用了！我只需要重新启动我的构建。很抱歉，非常感谢：）不用担心，喜欢你的昵称：）
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);