訪問也是數組 {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))