1

在我的 React 应用程序中，我有一个parameters在 state 中调用的对象，它代表一棵树。

这是我的parameters对象：

{
    "Access_List": {
        "state": "override",
        "value": {
            "88": {
                "state": "inherit",
                "value": [{
                    "ip": {
                        "state": "inherit",
                        "value": "19.1.1.1"
                    },
                    "mask": {
                        "state": "override",
                        "value": "0.0.0.0"
                    }
                }]
            }
        }
    }
}

我想要一种通用的方法来更新树下的任何叶子值。我怎样才能做到这一点？例如，我想更新ip.

我知道我可以递归地遍历parameters对象并给每个节点一个表示其在树中路径的键。例如，ip将是

"ip":{
        "state":"inherit",
        "value":"19.1.1.1",
        "key":"Access_List.value.88.value.0.ip"  
}

然后我可以使用 lodashdeepClone函数对状态进行深度复制，然后使用 lodash 改变 ip 的值，set如下所示：

set(parameters, `${key}.value`, NEW_VALUE)

最后设置新状态。

这种方式将导致我所有的孩子重新渲染。如何在知道对象路径的情况下不可变地更新状态。

4

2 回答 2

0

我建议使用immer或immutability-helper 之类的东西。这使您可以轻松地更新不可变的嵌套对象。

对于 immer 你会这样写：

produce(yourObject, objectState => {
       objectState.Access_List.value.88.value[0].ip.value = 0
});

对于不变性助手：

update(yourObject, {
     Access_List: {
         value: {
             88: {
                 value: {
                    [0]: {
                        ip: {
                           value :{$set: 0}
                       }
                 }
             }
         }
     }
});

这些是更新对象和保持不可变的好方法，可以极大地提高性能。两者都返回新的、不可变的更新对象。它只更新您要更新的路径，并保持这些您不想更新的对象相同。

如果您使用 redux、mobx 或纯函数/组件，这将防止不必要的重新渲染，因为只有使用对象更新部分的组件才会被重新渲染。

希望这可以帮助。快乐编码。

于 2019-08-13T07:49:24.197 回答
0

我认为你看错了。不变性是指不只改变对象的一部分。这是正确的方法。您可能需要的是一种防止不必要的重新渲染的方法。您可以通过使用PureComponent或自己的实现来实现shouldComponentUpdate- 取决于您对parameters对象的使用。要考虑的另一件事是，您是否真的需要将一个对象中的所有内容都传递给您的应用程序。

于 2019-08-13T07:26:32.087 回答