Question

我有一个具有prop的Component，它是一个数组，我用来映射并返回该数组中每个项目的子组件。每个项目都是另一个对象数组。但是，当我对内部数组中的项执行更新时，如下所示：

    let newInnerArray = getInnerArray(itemIndex); //assume this is a function that gets the correct inner array by the index

    newInnerArray[innerArrayIndex].name = "changed name";

    arrayObjs[itemIndex].innerArray = newInnerArray;

反应组件没有更新，因为我已经对内部阵列执行了更新，并且没有更改它们的数量（这将触发更新）。这是支柱要澄清的简化版本：

    [{
        name: "name 1",
        innerArray: [
            {
                innerName: "inner name 1"
            }
        ]
    }]

所以在我的Component中，我映射的支柱是那里的外部数组。当我更新其中一个prop项目＆＃34; innerName＆＃34;时，不会为该组件触发更新。

要触发更新，我要为每个外部数组的项添加一个虚拟属性，并在每次更新到内部数组时更新它：

arrayObjs[itemIndex].date = performance.now(); //using performance.now() because it always produces a unique value

现在让道具看起来像这样：

[{
    name: "name 1",
    date: performance.now(),
    innerArray: [
        {
            "innerName": "inner name 1"
        }
    ]
}]

这有效，但非常hacky。每当我在其中一个道具中更新内部数组时，是否有更好的方法强制组件更新？

PS：对不起，如果我没有解释这个问题或者让人感到困惑。如果有人不理解，我会进一步解释。

Answer 1

似乎因为React在您的情况下进行浅层比较。比较对象时，浅比较仅比较它们的引用（＆＃34;它们是否指向同一个对象？＆＃34;）。我可以想到几个选项：

使用immutableJS表示您的州。我正在申请中这样做。
创建内部数组的克隆（副本）

＆＃13;

    const innerArray = getInnerArray(itemIndex);
    let newInner = [...innerArray];

＆＃13;

使用props与shouldComponentUpdate isEqual（或underscore isEqual）手动比较您的新lodash。

执行道具的深度更新时，不会更新组件

1 个答案: