redux 修改后组件不重新渲染

如何解决redux 修改后组件不重新渲染

我在我的应用程序中使用了 redux，起初，它按我的意愿工作。当我通过减速器向我的状态添加一些东西时，我的组件会根据我的需要重新渲染。但是当我只修改状态内属性的值时，我的组件不会重新渲染。

如果你需要代码我可以上传它（或一些部分）但我认为问题更多的是思维方式。

我的状态的例子

state = {
    "BaliseSeen": {
        "Marseille": [
            {
                "id": "5566","nom": "Notre dame de La Garde","type": "Monument","vue": true,},],"Toulon": [
            {
                "id": "1122","nom": "Isen Yncrea Méditerranée",{
                "id": "3344","nom": "Appartement n°69",{
                "id": "6677","nom": "Mairie","type": "Info","vue": false,"Medailles": [
        {
            "ville": "Toulon","User": [],}

当我添加这样的新东西时，它会工作并重新渲染：

nextState = {...state,BaliseSeen: {
               ...state.BaliseSeen,[city]: [...state.BaliseSeen[city],{ id: action.value.id,type: action.value.type,nom: action.value.nom,vue: action.value.vue }]
      }
}

但是当我只想像这样将 vue 属性从 false 更改为 true 时，它可以工作（当我检查状态时应用了修改但我的组件没有重新渲染：

BaliseSeenIndex = state.BaliseSeen[city].findindex(item => item.id === action.value.id)
nextState = state
nextState.BaliseSeen[city][BaliseSeenIndex].vue = true

（我也尝试从我的状态中删除元素并在之后添加它，但与以前一样，它无需渲染我的组件即可工作）所以不知道怎么说状态被修改了

解决方法

如评论；你不应该变异，而是执行以下操作

//not sure where cityp comes from but I assume it is from the action
return {
  ...state,BaliseSeen: {
    ...state.BaliseSeen,[city]: state.BaliseSeen[city].map((item) =>
      item.id !== action.value.id
        ? item//not the item we want to edit,return unchanged
        : {//item we are looking for,return changed copy
            ...item,vue: true,}
    ),},};