通过 json 对象反应地图答案

【问题标题】：React map through json object通过 json 对象反应地图
【发布时间】：2021-09-26 04:22:49
【问题描述】：

我很难找到一种方法来遍历这个嵌套的 JSON 数据。我想在选择选项列表中显示元素。

我将我的数据存储在一个请求后的状态中。

const [filterData, setFilterData] = useState([]);

useEffect(() => {
    ScenarioService.getFilterData().then((res) => {
      setFilterData(res.data);
      console.log(res.data);
    });
    setIsData(true);
  }, []);

{
"groups":[
      "group1",
      "group2"
   ],
"regions":[
      "region1",
      "region2"
]
}

我已经试过了：

<select>
      {Object.keys(filterData).map((key) => {
         return filterData[key].map((value) => {
           return <option>{key[value]}</option>;
         });
       })}
</select>

<select>
{Object.keys(filterData["regions"]).map((keyName, i) => {
   return (
     <option key={filterData[keyName]}>{filterData[keyName]}</option>
   );
})}
</select>

{filterData.regions.map((value)=>{
          return <option>{value}</option>
        })}

最后一个给出了我的 TypeError: Cannot read property 'map' of undefined.

如果我尝试将我的状态设置为 setFilterData(res.data.regions) 那么我可以调用 map() 并且它可以工作，但是我的状态只是区域。

结果应如下所示：

【问题讨论】：

看起来你太复杂了。对于第一个选择，您只需要filterData.groups.map(...)，其中... 是一个将文本包装在<option> 中的简单函数。（与您已有的类似。）与第二个类似，只是使用regions 而不是groups。
如果我尝试您的解决方案，我会收到错误消息：“TypeError: Cannot read property 'map' of undefined”，因为我无法通过 Object.map 映射。我真的不知道为什么会这样，因为组是数组，它应该与 map() 一起使用。 @RobinZigmond
我又看了一遍，这是因为您的 filterData 在请求解析之前以空数组的形式开始 - 它需要具有这两个属性。尝试用const [filterData, setFilterData] = useState({ groups: [], regions: [] });替换const [filterData, setFilterData] = useState([]);

标签： javascript json reactjs loops object

【解决方案1】：

您可以通过使用函数来简化代码重复

const renderOpts = key => filterData[key].map(v => <option value={v}>{v}</option>)

然后渲染选择：

<select>{renderOpts('groups')}</select>

<select>{renderOpts('regions')}</select>

【讨论】：

感谢您的建议，但它给了我 TypeError: Cannot read property 'map' of undefined.