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

Question

我有我应用程序的项目部分，用户可以在项目中创建事件。我的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
    };

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

Answer 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
    })