React/JavaScript中访问数组类型属性返回undefined问题排查

我一眼就瞅出问题出在哪啦！你看，mappedCountries其实是个二维数组——Countries.map(({ regions }) => regions)会把每个国家的regions数组单独拎出来，所以它的结构是[[地区对象1, 地区对象2,...], [地区对象A, 地区对象B,...]]。

而你后面写的mappedCountries.map(({ name }) => name)，是把每个子数组当成对象去解构name属性，可数组根本没有name这玩意儿啊，自然就返回undefined了！

给你两种靠谱的解决方案：

方案一：用flatMap一步到位 #

flatMap能先执行map操作，再自动扁平化一层数组，刚好匹配你的需求：

const mappedRegion = Countries.flatMap(({ regions }) => regions.map(region => region.name));

方案二：先扁平化再遍历 #

如果你的运行环境比较特殊（不过现在主流环境都支持flatMap了），可以先把二维数组转成一维，再提取名称：

// 先把二维数组拍平成一维
const flatRegions = mappedCountries.flat();
// 再遍历取出每个地区的name
const mappedRegion = flatRegions.map(region => region.name);

当然你也可以用最直观的嵌套遍历写法：

const mappedRegion = [];
Countries.forEach(country => {
  country.regions.forEach(region => {
    mappedRegion.push(region.name);
  });
});

替换代码后再运行，console.log(mappedRegion)就能输出所有地区名称的数组啦！

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