ReactJS遍历二维数组提取城市数据并渲染Select组件求助

你的问题出在提取城市的逻辑上：

• 第一个map((el) => el)完全是冗余操作，没有任何作用
• 第二个map中使用el[idx]是错误的，这里的idx是外层二维数组的索引，导致你只会取每个子数组中索引等于外层数组索引的元素，自然大部分情况取不到值

正确的城市提取方式 #

可以先用flat()将二维数组扁平化，再提取所有city字段：

const cities = data.flat().map(item => item.city);

flat()会自动将二维数组展开为一维，同时忽略空数组，之后直接映射每个元素的city属性就能得到你想要的结果：["Phnom Penh", "Tirana", "Andorra la Vella", "Mariehamn"]

修正后的渲染代码 #

注意渲染option时不要用循环的idx当key（容易引发React渲染问题），建议用唯一的city值作为key：

<select>
  {cities.map((city) => (
    <option value={city} key={city}>
      {city}
    </option>
  ))}
</select>

另一种兼容式实现（不用flat()） #

如果需要兼容不支持flat()的环境，可以用reduce来扁平化并提取城市：

const cities = data.reduce((acc, current) => {
  return acc.concat(current.map(item => item.city));
}, []);

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