组件未在深度嵌套的 redux 对象上更新答案

【问题标题】：Component not updating on deeply nested redux object组件未在深度嵌套的 redux 对象上更新
【发布时间】：2020-06-14 14:33:04
【问题描述】：

我的应用有一个项目部分，用户可以在项目中创建事件。我的 redux 状态嵌套很深，如下所示：

当用户创建事件时，我使用以下内容更新状态：

case CREATE_PROJECT_TODO:
    const data = [...state.data];
    const index = state.data.findIndex(project => project._id===action.payload.project_id);
    data[index].events = [
        ...data[index].events,
        action.payload  
    ];
    return {
        ...state,
        data
    };

但是，我的反应组件没有更新以反映更改。我很确定我没有变异状态。是否是深度嵌套对象的问题，并且反应无法检测到这些变化！任何帮助将不胜感激！

【问题讨论】：

标签： reactjs redux react-redux

【解决方案1】：

使用const data = [...state.data]，您正在执行shallow copy。

使用地图并更新您的状态。您的状态已正确更新，并将触发组件正确重新渲染。

case CREATE_PROJECT_TODO:
    const index = state.data.findIndex((project) => project._id === action.payload.project_id)
    const updatedData = state.data.map((item, idx) => {
    if (idx === index) {
        return {
        ...item,
        events: [...item.events, action.payload],
        }
    }
    return item
    })

【讨论】：