Question

我的道具中有嵌套数组，用户可以通过拖放列来重新排列第二级数组。我（使用redux）对getState的外部数组进行浅表复制，进行重新排序（通过基于索引重新分配数组对象），然后将新数组返回到状态（使用我的reducer中的spread运算符）。但是，componentDidUpdate不被称为，如果此顺序是页面加载后我要做的第一件事。如果我执行其他操作以更新道具/状态，然后尝试重新排序，则排序工作正常，并调用了componentDidUpdate。

在前一种情况下，排序是我在页面加载/刷新后首先要做的事情，渲染功能被命中（使用正确重新排序的道具），但是DOM从不更新，大概是因为redux无法识别状态改变？

似乎其他一些道具更改（即使与数组无关）也会“唤醒” redux或connect并允许其识别更改。

我在这里复制，分发然后释放化简器中的更新状态：

在actionCreator方法中：

...
const newProjects = getState().tracker.projects.slice().map(p => {
    if (p.innerArray) {
        const from = p.innerArray[draggedId-1];
        const to = p.innerArray[droppedId-1];
        p.innerArray[draggedId - 1] = { ...to, order: draggedId };
        p.innerArray[droppedId - 1] = { ...from, order: droppedId };
    }
    return p;
})                
dispatch({ type: 'RECEIVE_FIELD_UPDATE', projects: newProjects, message: "Sorted" });

减速器：

case 'RECEIVE_FIELD_UPDATE':
        return {
            ...state,
            projects: action.projects,
            message: action.message
        }

正如您所看到的，据我所知，我并没有在化简器中改变状态或进行其他反模式操作。

FWIW，消息属性的“排序”值似乎可以通过是否命中componentDidUpdate来获得（我有一个模态弹出消息以进行确认）。

任何指针或相关文档都将有所帮助；我一直在阅读所有内容，包括其他StackOverflow帖子，但无济于事。

更新解决了这个问题，它确实与redux无关，不区分属性，但不是因为我的期望，如果有兴趣，请在下面阅读。

Answer 1

当在化简器中以数组格式更新状态时，我不得不再次分散状态以使更新发生并避免发生变异。

case 'RECEIVE_FIELD_UPDATE':
        return {
            ...state,
            projects: ...state, ...action.projects,
            message: action.message
        }

或...

case 'RECEIVE_FIELD_UPDATE':
         return {
             ...state,
             projects: [...state, ...action.projects],
             message: action.message
            }

取决于格式。希望能有所帮助。

Answer 2

弄清楚了，通常，我在错误的地方看。

问题是我对页面加载进行有条件的检查以防止重新加载已存储的数据，这阻止了任何调度的触发。当我查看化简版时，拖动后项目的子阵列是相同的，因为状态尚未预先连接。我以为硬刷新会导致完全重新加载，但是显然我需要阅读有关redux如何存储数据以及如何刷新数据的更多信息。

无论如何，要解决此问题，以便我在页面加载时获取新数据，就可以解决此问题，并且componentDidUpdate现在一直被触发。

React / Redux：componentDidUpdate无法持续触发

2 个答案: