У меня есть React Context и редуктор, который обновляет контекст следующим образом:
case setAllExtras:
for (let i=0; i < state.stuff['extras'].length; i++) {
state.stuff['extras'][i][Object.keys(state.stuff['extras'][i])[0]]['include'] = true
}
return {...state}
Это работает, и обновление этого свойства обновляет карту массива компонента:
{extras ? (
<div>
{context.state.customerInfo.couple === false ? (
context.state.retirementSpending.extras.map((item, index) => {
let key = Object.keys(item);
let opaque = item[key]['include'];
return (
<Bar
opaque={opaque}
addRemoveBarHandler={(add, barName) => {addRemoveBarHandler(add, barName)}}
/>
);
})
) : (
context.state.retirementSpending.extras.map((item, index) => {
let key = Object.keys(item);
let opaque = item[key]['include'];
return (
<AmmoniteBar
opaque={opaque}
addRemoveBarHandler={(add, barName) => {addRemoveBarHandler(add, barName)}}
/>
);
})
)}
</div>) : ...
Это работает, и значение непрозрачности изменяется для каждого компонента Bar.
Когда я пытаюсь изменить непрозрачное значение одного компонента Bar, он не обновляет DOM, и компонент не перерисовывается.
Это в редукторе изменяет значение в контексте, но изменение не отражается в DOM:
case setBar:
const key = action.payload.bar
for (let i=0; i < state.stuff['extras'].length; i++) {
if (state.stuff['extras'][i].hasOwnProperty(key)) {
console.log("KEY FOUND!!!!!!!!!!!!!!!!!!!!!!!!!!")
state.stuff['extras'][i][Object.keys(state.stuff['extras'][i])[0]]['include'] = true
}
}
return {...state}
Как получить сопоставленный массив для изменения?