Question

描述上下文的快速信息。我正在使用一个树组件来接收这种数据模型作为支持：

workfolder: [{
    label: "test",
    folders: [
        { label: "label 1", id: 1 },
        { label: "label 2", id: 2 },
        { label: "label 3", id: 3 }
    ]
}];

所有数据都存储在Redux存储中。

初始值为：

state: { workfolder: [] }

在安装时，我获取默认值，并将结果合并到化简器中的workfolder中，然后绘制树。

return {
  ...state,
  workfolder: results
}

当我单击标签之一（标签3）时，我再次使用id获取子文件夹，并且得到：

[{ label: "label 5", id: 5 },{ label: "label 5", id: 5 }]

这时，在化简器中，我使用library循环进入状态，直到找到与我单击的元素的id相匹配的属性（在这种情况下为标签3）并想要将子文件夹合并到新的文件夹属性中。

let newState = JSON.parse(JSON.stringify(state.workfolder));

deepForEach( newState, (value, key, subject, path) => { 
    const isParentFolder = value === action.payload.parent;
    const hasNotFolders = !subject.folders;

    if( isParentFolder && hasNotFolders ) {

        subject.folders = action.payload.node

    }

} );

然后我在商店中合并新状态：

return {
    ...state,
    workfolder: newState
}

按照这种方式，我会更新商店，但组件不会重绘。

注意：这是一个虚拟的示例。在现实生活中，我必须处理仅包含id和string的多层嵌套对象，其中包含要在商店中修改的属性的路径。我在the redux documentation中找到的示例显示了如何静态地编写合并...

更新道具时，React组件不会重绘

0 个答案: