reactjs - 组件未更新深度嵌套的 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 组件没有更新以反射(reflect)更改。我很确定我没有改变状态。是否存在深层嵌套对象的问题，并且 react 无法检测到这些变化!任何帮助将不胜感激!

Answer 1

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

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

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