组件在 redux 修改后不会重新渲染

Question

我在我的应用程序中使用redux，起初，它可以随心所欲地工作。当我通过reducer将某些内容添加到我的状态中时，我的组件将按照我的意愿重新渲染。但是，当我只修改状态中属性的值时，我的组件不会重新呈现。

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

我的状态示例

state = {
"BaliseSeen": {
"Marseille": [
{
"id": "5566",
"nom": "Notre dame de La Garde",
"type": "Monument",
"vue": true,
},
],
"Toulon": [
{
"id": "1122",
"nom": "Isen Yncrea Méditerranée",
"type": "Monument",
"vue": true,
},
{
"id": "3344",
"nom": "Appartement n°69",
"type": "Monument",
"vue": true,
},
{
"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

(我还试图从我的状态中删除元素，并在之后添加它，但与之前一样，它在不渲染组件的情况下工作(所以我不知道该怎么说状态被修改了

Answer 1

如有评论；你不应该变异，做下面的

//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,
}
),
},
};