访问也是数组 {React, Javascript} 的属性返回未定义

Question

这可能看起来很愚蠢，但我迷路了。 我想通过国家和地区数组映射。 我有一个Countries Array ，其中还包括Region's Array 。 我可以访问国家数组，但是当我尝试访问从Countries Array返回的Regions Array Countries Array ，它返回未定义。 这是一个最小的例子。

CodeSandBox 上的完整代码

 const Countries = [ { countryName: "Afghanistan", countryShortCode: "AF", regions: [ { name: "Badakhshan", shortCode: "BDS", }, { name: "Badghis", shortCode: "BDG", }, { name: "Helmand", shortCode: "HEL", }, { name: "Herat", shortCode: "HER", }, { name: "Jowzjan", shortCode: "JOW", }, { name: "Kabul", shortCode: "KAB", }, { name: "Kandahar", shortCode: "KAN", } ], }, { countryName: "Åland Islands", countryShortCode: "AX", regions: [ { name: "Brändö", shortCode: "BR", }, { name: "Eckerö", shortCode: "EC", }, { name: "Sund", shortCode: "SD", }, { name: "Vårdö", shortCode: "VR", }, ], } ] const mappedCountries = Countries.map(({ regions }) => regions); const mappedRegion = mappedCountries.map(({ name }) => name); console.log(mappedCountries); console.log(mappedRegion);

Answer 1

您正在 map 方法中返回一个数组。 所以结果是一个数组数组。

你需要flatten你的结果。 一个简单的替代方法是使用reduce

const mappedCountries = Countries.reduce((memo, { regions }) => [...memo, ...regions], []);
const mappedRegion = mappedCountries.map(({ name }) => name);

Answer 2

您可以像这样更改第二张地图内的条件以访问区域名称 - mappedCountries.map(e => e.map(({name}) => name))