嵌套数组中的javascript find()
我正在尝试用REACT建立一个网站。在主页上有两个按钮，欧洲和美国。假设您单击了“欧洲”。然后你会看到欧洲所有国家的列表。当你点击一个国家时，你应该会看到这个国家的城市列表。
问题是，我如何访问“城市”中的项目？
const DATA = [
{
id: 1,
title: "EUROPE",
countries: [
{
id: 1,
country: "france",
cities: [
{
id: 1,
city: "paris"
},
{
id: 2,
city: "toulouse"
}
];
// so at homepage, you click "europe", and on the second page i got this:
const StateCard = () => {
const { title } = useParams();
const selectedData = DATA.find( d => d.title === title);
return(
<div className="main">
{selectedData &&
selectedData.countries.map((item, id) => {
return (
<div className="card-container" >
<Link key={id} to={`${title}/${item.country}`}> {item.country} </Link>
</div>
);
})}
</div>useParams给我们返回了第一次点击后添加到网址的标题，即“欧洲”。selectedData返回了“EUROPE”中的项：{id: 1，title："EUROPE"，countries: Array(1)}
现在屏幕上显示“法国”。你点击了法国，现在我想显示里面的两个城市。我得到的只有：
const { country } = useParams();这给了我们“法兰西”。但是我不知道如何进入里面的城市。我试着使用DATA.countries.find()，但是我放在DATA之后的任何东西。给我"TypeError:无法读取未定义的属性'find‘“。
对不起，太长了，谢谢你们！
回答 3
Stack Overflow用户
发布于 2021-06-22 07:55:48
每种类型(大陆、国家、城市)都是一个数组。find不能在DATA.countries上工作，因为countries是您选择的任何洲对象的属性。
它可能会帮助您使用一系列方法来划分数据集合。getContinents将数据作为参数获取，并获取title的值。getCountries接收getContinents返回的数组以及country的值，并返回自己的国家数组，然后对该数据执行getCities maps以返回城市名称。
通过这种方式，您可以维护一系列数据集合，并且代码更易于维护。
const data = [{"id":1,"title":"EUROPE","countries":[{"id":1,"country":"france","cities":[{"id":1,"city":"paris"},{"id":2,"city":"toulouse"}]}]}];
const title = 'EUROPE';
const country = 'france';
const getContinents = (data, val) => data.find(obj => obj.title === title)
const getCountries = (data, val) => data.countries.find(obj => obj.country === val)
const getCities = (data) => data.cities.map(obj => obj.city);
// Pass in the data and the value of title
const continents = getContinents(data, title);
// Use the array returned from `getContinents` and the country value
const countries = getCountries(continents, country);
// Use the array returned from `getCountries`
const cities = getCities(countries);
console.log(cities);
Stack Overflow用户
发布于 2021-06-22 06:30:29
你可以先找到Country，然后在countriesResult上找到citiesResult，然后再从citiesResult.cities找到城市。
您将收到错误**TypeError: Cannot read property 'find' of undefined**，因为
您正在做的是DATA.countries.find()。Data是一个数组，所以你不能对它使用.countries。您必须使用find或索引来查找国家/地区。
const DATA = [{
id: 1,
title: "EUROPE",
countries: [{
id: 1,
country: "france",
cities: [{
id: 1,
city: "paris",
},
{
id: 2,
city: "toulouse",
},
],
}, ],
}, ];
const title = "EUROPE";
const country = "france";
const countriesResult = DATA.find((d) => d.title === title);
const citiesResult = countriesResult.countries.find(
(c) => c.country === country
);
const result = citiesResult.cities.map((c) => c.city);
console.log(result);
Stack Overflow用户
发布于 2021-06-22 06:24:19
DATA是一个对象数组。DATA中的每一项都有countries数组。因此，您必须在DATA数组中的特定项上使用find()，而不是在DATA数组本身上。例如，您可以这样做：
DATA[0].countries.find()https://stackoverflow.com/questions/68075339
复制相似问题
腾讯云开发者
