javascript - 操作深度嵌套的数据对象(在React中)

我在React中有一个应用程序，从根本上来说，它是一个文档，用于显示来自任意数量的第二级“子代”资源的数据，每个子代显示来自任意数量的第三级“孙子”资源的数据，每个孙子都显示来自任意数量的第4级“大孙子”资源的数据。

这是从我的API服务器检索的基本JSON结构：

{ id: 1,
  children: [
    { id: 1,
      grandchildren: [
        { id: 1,
          greatgrandchildren: [{ id: 1 }, { id: 2 }, ...]
        },
        ...
      ]
    },
    ...
  ]
}

为了简单起见，每个级别的对象都具有许多其他属性，在此未显示。

按照推荐的React工作方式，此对象在加载时会被检索并设置为应用程序顶级组件的状态，然后将相关数据作为道具传递给子代，以构建该组件树，反映了这种结构。

很好，但是我需要能够对每个资源执行CRUD（创建/读取/更新/删除）操作，由于需要将整个数据对象传递给setState()，这真是一个痛苦。我只是想修改其中的一小部分。在顶级或第二级上还不错，但是由于需要迭代，基于id获取我想要的对象，对其进行更改，然后使用以下命令构建整个结构的副本，因此任何事情都会很快变得笨拙只是那一点改变了。 React插件提供了一个update()函数，该函数很有用，但实际上仅对最后一步有所帮助-我仍然必须处理嵌套迭代并在其之外重建相关数组。

因为我的目标是用临时数据乐观地更新视图，然后使用从服务器返回的正确数据（成功时）或恢复（失败时）再次更新视图，所以增加了额外的复杂性。这意味着我需要小心保留旧数据/状态的副本而不会对其进行更改（即共享引用）。

最后，我目前对顶层组件上定义的每个级别的每个CRUD操作都有一个回调方法（共12个方法）。这似乎过分，但是他们都需要调用this.setState()的能力，而且我发现很难找出如何重构它们之间的共性。我已经有一个单独的API对象，可以执行实际的Ajax调用。

所以我的问题是：是否有更好的React适合方法来处理CRUD操作并像我一样使用嵌套的数据结构为它们处理数据，以允许乐观更新的方式？

最佳答案

从表面上看，flux architecture可能是您要寻找的答案。在这种情况下，每种类型的资源都有一个Store（或者取决于数据的结构，所有资源都可能有一个Store），并让视图监听他们关心的数据中的更改。