Reactjs 使用循环响应上下文更新，但不针对单个项

我有一个React上下文和一个reducer，它更新上下文如下：

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}

case setAllExtras:
for（设i=0；i

这将起作用，更新此属性将更新组件的阵列映射：

    {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>) : ...              

{extras(
{context.state.customerInfo.couple==false(
context.state.RetirementExpanding.extras.map（（项目，索引）=>{
设key=Object.key（项）；
让不透明=项[键]['include']；
返回(
{addRemoveBarHandler（add，barName）}
/>
);
})
) : (
context.state.RetirementExpanding.extras.map（（项目，索引）=>{
设key=Object.key（项）；
让不透明=项[键]['include']；
返回(
{addRemoveBarHandler（add，barName）}
/>
);
})
)}
) : ...              

这会起作用，并且每个条形构件的“不透明”值都会更改

当我尝试更改单个条形组件的不透明值时，它不会更新DOM，也不会重新渲染该组件

reducer中的此操作会更改上下文中的值，但更改不会反映在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}

案例立杆：
常量键=action.payload.bar
for（设i=0；i

---

如何更改映射数组？

我认为您面临的问题是易变性。似乎您正在通过改变数组来更改减速机中的值。即使通过扩展语法返回{…state}并创建新对象，state.stuff.extras仍然是相同的数组。这对React来说不太合适。我建议你对你的状态做一个深度拷贝，然后修改拷贝并返回。我相信你面临的问题是易变性。似乎您正在通过改变数组来更改减速机中的值。即使通过扩展语法返回{…state}并创建新对象，state.stuff.extras仍然是相同的数组。这对React来说不太合适。我建议你制作一份你所在州的深度副本，然后修改副本并返回。