通过 json 对象反应映射

Question

我无法找到遍历此嵌套 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() 并且它可以工作，但是我的状态只是区域。

结果应如下所示：

Answer 1

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

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

然后渲染选择：

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

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