React Hooks的嵌套数据结构问题

问题描述

我有一个项目，必须能够创建和编辑新文档。 文档具有类别，类别具有参数，并且参数具有输入值的输入框。

结构如下：

{
  documentName: "Example",category_1: {
    categoryName: "example category",parameter_1: {
      parameterName: "example parameter",value: 1234
      unit: "cm"
      ...
    }
    ...
  }
}

我将名称存储在内部，因为名称不是唯一的，因此可以多次出现。

文档，类别和参数是非常重要的组成部分，因为它们需要具备的功能。

它们是嵌套的：

<Document>
  <Category setter={setValue} id=key={customGenerated}>
    <Parameter setter={setValue} id=key={customGenerated}>
      <CustomInputBox1 id=key={customGenerated}/>
      ...
      <CustomInputBox6/>
    </Parameter>
  </Category>
</Document>

在每个级别上我都一样。

我有一个dataObject，它存储下面的数据。我在每个“级别”都有单独的setValue函数，这些函数将新值添加到dataObject并从其自身的级别传递到其下一个级别。

数据对象：

const [dataObject,setDataObject] = useState({});

设置器选项A：

const setValue = function (id,val) {             
    setDataObject({...dataObject,[id]: val});
}
useEffect( () => {
    if (setter) {
        setter(___id,dataObject);
    }
},[dataObject]);

当重新渲染组件并更改dataObject时，此数据将向上发送。

---

设置器选项B：

const setValue = function (id,val) {     
    const newDo = {...dataObject,[id]: val};
    if (setter) {
        setter(catid,newDo);
    }
    setDataObject(newDo);
}

这将立即发送数据对象

---

我的问题

当我加载文档并创建多个类别并且它们尝试同时访问Documents dataObject时出现。 问题在于（特别是使用选项B）渲染混合在一起，有时Documents dataObject像一个Category一样丢失，Category清晰可见，只是以某种方式从对象中删除了，我什至不知道为什么。我当时在想原因是更多类别同时更新了Documents数据对象，但是我不确定这会导致完整的类别从数据对象中消失。我写这本书是因为我没有更好的主意，我浪费了很多时间试图弄清楚该做什么，而我只是感到疲倦和绝望。

我了解了Redux和Flux数据结构 而且我要么很笨，要么太累了，但是我认为我的问题仍然存在，因为我将尝试同时访问和修改具有多个类别的同一来源。

---

我的大脑帮助了人们

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）