React如何根据选中的父级值从JSON对象中获取子级值

核心逻辑：直接通过选中的父级Key获取子级值 #

不需要用多层map和Object.keys绕圈子，直接利用选中的父级键（比如'Parent1'）访问原JSON对象，就能快速拿到对应子级的value数组：

// 假设selectedParent是当前选中的父级选项，比如'Parent1'
const getChildValues = (selectedParent) => {
  return myJsonObj[selectedParent].children.map(child => child.value);
};

// 示例：选中Parent1时
console.log(getChildValues('Parent1')); // 输出 ["p1-value1", "p1-value2"]

你之前代码的问题分析 #

你的代码返回[0,1]，是因为最后一步Object.keys(child).map((key) => (Object.keys(child))[key])其实是在遍历child数组的索引键（数组的键是字符串类型的索引，比如"0"、"1"），最终返回的是这些索引字符串，被隐式转成了数字0,1。完全没必要遍历所有父级的子节点，直接针对选中的父级单独处理即可。

完整双下拉联动示例（原生JS） #

下面是可直接运行的联动实现，帮你把逻辑落地：

<!-- HTML结构 -->
<select id="parentSelect"></select>
<select id="childSelect"></select>

<script>
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 parentSelect = document.getElementById('parentSelect');
const parentKeys = Object.keys(myJsonObj);
parentKeys.forEach(key => {
  const option = document.createElement('option');
  option.value = key;
  option.textContent = key;
  parentSelect.appendChild(option);
});

// 联动逻辑：父级选中变化时更新子级下拉框
const childSelect = document.getElementById('childSelect');
parentSelect.addEventListener('change', (e) => {
  // 清空子级下拉框
  childSelect.innerHTML = '';
  // 获取选中的父级
  const selectedParent = e.target.value;
  // 获取对应的子级value数组
  const childValues = myJsonObj[selectedParent].children.map(child => child.value);
  // 填充子级下拉框
  childValues.forEach(value => {
    const option = document.createElement('option');
    option.value = value;
    option.textContent = value;
    childSelect.appendChild(option);
  });
});

// 初始化时默认加载第一个父级的子级
parentSelect.dispatchEvent(new Event('change'));
</script>

这个示例会自动初始化父级下拉框，选中父级时实时更新子级选项，完全满足联动需求。

内容的提问来源于stack exchange，提问作者curiousCat