JavaScript/React Code-控制/页面赢得了filereader中的渲染

Question

我有一个反应页面，我的输入之一是文件上传。加载时，我想读入文件（它是 JSON），然后将文件显示为树，以允许我的用户选择节点（规则）来针对另一个数据集运行。但是，当我选择 JSON 文件并且“onload”事件处理程序实际触发时，页面只是停止渲染，我得到一个空白屏幕。我不知道为什么，我看不到任何错误，但我对 React 很无知，对 javascript 也有点新。所以，这很可能只是我正在做的一件愚蠢的事情。有人能指出我在这里做错了什么吗？

    handleRules(event) {
        const ruleRdr = new FileReader();
        ruleRdr.onload = async (e) => {
            const rBuf = (e.target.result);
            const rData = JSON.parse(new TextDecoder().decode(rBuf));
            // the data is there, but it's not mapping into the tree...!?!?!?
            const tree = {
                name: "QA/QC Rules",
                id: 1,
                toggled: true,
                children: rData.map((wFlow, index) => ({
                    name: wFlow.WorkflowName,
                    id: index,
                    children: wFlow.Rules.map((rule, idx) => ({
                        name: rule.RuleName,
                        id: idx
                    }))
                }))
            };
            this.setState({ ruleData: rData, hasRules: true, treeData: tree });
        }
        ruleRdr.readAsArrayBuffer(event.target.files[0]);
    }

编辑＃1：我现在不认为这是上面的代码，我认为它可能是我的树库（ react-treebeard）或我对如何使用它的无知。该代码生成了我认为可用的数据，但它没有将其渲染出来。

{
  "name": "QA/QC Rules",
  "id": 1,
  "toggled": true,
  "children": [
    {
      "name": "COMP",
      "id": 0,
      "children": [
        {
          "name": "ParentMustHaveCat",
          "id": 0
        },
        {
          "name": "ParentMustHaveMfg",
          "id": 1
        },
        {
          "name": "ParentMustHaveFamily",
          "id": 2
        },
        {
          "name": "SymbolsMustHaveFamily",
          "id": 3
        }
      ]
    },
    {
      "name": "PNLCOMP",
      "id": 1,
      "children": [
        {
          "name": "ParentMustHaveCat",
          "id": 0
        },
        {
          "name": "ParentMustHaveMfg",
          "id": 1
        },
        {
          "name": "ParentMustHaveFamily",
          "id": 2
        },
        {
          "name": "SymbolsMustHaveFamily",
          "id": 3
        }
      ]
    },
    {
      "name": "PNLTERM",
      "id": 2,
      "children": [
        {
          "name": "ParentMustHaveCat",
          "id": 0
        },
        {
          "name": "ParentMustHaveMfg",
          "id": 1
        },
        {
          "name": "ParentMustHaveFamily",
          "id": 2
        },
        {
          "name": "SymbolsMustHaveFamily",
          "id": 3
        }
      ]
    }
  ]
}

Answer 1

我发现了。我切换到MUI，因为它具有更多的组件，无论如何我都想使用。我也有类似的问题，并意识到我在父母和孩子之间具有重复的ID，并且在尝试比较MUI库中的父母和子女时，正在创建一种锁定。完全在我身上 - 我很愚蠢。