React - 如何根据从 json 对象中选择的父值访问子值答案

【问题标题】：React - How to access child values based on a selected parent value from a json objectReact - 如何根据从 json 对象中选择的父值访问子值
【发布时间】：2022-10-12 21:19:35
【问题描述】：

我有以下 json 对象

const myJsonObj = {
    "Parent1": {
        "children": [{
            "key": "1",
            "value": "p1-value1"
        }, {
            "key": "2",
            "value": "p1-value2"
        }]
    },

    "Parent2": {
        "children": [{
            "key": "1",
            "value": "p2-value1"
        }, {
            "key": "2",
            "value": "p2-value2"
        }]
    },

    "Parent3": {
        "children": [{
            "key": "1",
            "value": "p3-value1"
        }, {
            "key": "2",
            "value": "p3-value2"
        }]
    }
}

我想要做的是我想在下拉列表中显示所有父项，并基于此父值的选择，我想在另一个下拉列表中填充所有子项的值。

我正在使用获取父值

const keys = Object.keys(myJsonObj); // const parentArr = ['Parent1','Parent2','Parent3']

现在，如果我的第一个下拉菜单有'父 1'选择。我希望显示第二个下拉菜单'p1-value1','p1-value2'

我正在尝试使用以下方法来实现这一点，但它会将数组的键返回给我说 [0,1]

const childrenNode =  keys.map((key) => myJsonObj[key]);
const child = childrenNode.map((child) => child.children)
Object.keys(child ).map((key) => (Object.keys(child))[key])

由于我在这里的理解有限，非常感谢有关如何为选定的父级获取子级值的任何指导。

谢谢你！

【问题讨论】：

标签： reactjs json typescript react-native

【解决方案1】：

你把事情复杂化了。

你得到了父母的权利（1）

然后你让孩子依赖于选定的父母，在这种情况下，你可以为父母使用状态变量（2）。

当您在父输入更改时设置parent 时，子级将使用派生值进行更新。

const parents = Object.keys(myJsonObj) /// 1

const [selectedParent, setSelectedParent] = useState(parents[0]); //2
const childrent = myJsonObj[selectedParent].children.map(child => child.value)

【讨论】：

在 useState(parents[0]) 中，这是否意味着我需要以某种方式获取密钥？类似 useState(parents[key])?
不，默认情况下只选择一个父母（从您已经阅读的键中）

【解决方案2】：

您可以通过动态呈现第二个下拉列表来实现这一点。在您的第一个下拉列表中，您选择您的父母。将其保存在变量中。然后您可以选择您的孩子并用您获得的数据填充第二个选择。

所以 js 代码看起来像这样：

const parent = "Parent3" //remember you got this information from your first select
const targetChild = myJsonObj[parent].children;

targetChild 您选择的孩子的数组。现在您可以使用targetChild.map 填充选择

旁注：您不需要密钥“孩子”。你也可以像这样设置你的json：

const myJsonObject = {
  "Parent2": [{
      "key": "1",
      "value": "p2-value1"
    }, {
      "key": "2",
      "value": "p2-value2"
    }], ...
}

【讨论】：