问题描述
对不起，我是新手，仍然了解映射和 for 循环，所以我不确定我是否正确地问了这个问题。我怎样才能让我的地图函数更加动态，这样我就不必对每个函数进行硬编码来更改 [1]、[2]、[3] 等的属性。我希望它只执行所有这些直到没有没有了。
const handleInputSearch = (e) => {
let value = e.target.value;
let result = [];
if (value.length === 4) {
setFilteredData(allData.filter((data) => {
return data.year === value;
}));
result = allData.filter((data) => {
return data.year === value;
});
console.log('filteredData',filteredData)
}
}
{filteredData.map((value,index) => {
return (
<div style={{
height: `600px`,overflow: "scroll"
}}>
<Event
category={value.children[0][1].category}
title={value.children[0][1].title}
subtitle={value.children[0][1].subtitle}
body={value.children[0][1].body}
image={value.children[0][1].image}
>
</Event>
<Event
category={value.children[0][2].category}
title={value.children[0][2].title}
subtitle={value.children[0][2].subtitle}
body={value.children[0][2].body}
image={value.children[0][2].image}
>
</Event>
<Event
category={value.children[0][3].category}
title={value.children[0][3].title}
subtitle={value.children[0][3].subtitle}
body={value.children[0][3].body}
image={value.children[0][3].image}
>
</Event>
<Event
category={value.children[0][4].category}
title={value.children[0][4].title}
subtitle={value.children[0][4].subtitle}
body={value.children[0][4].body}
image={value.children[0][4].image}
>
</Event>
</div>
)})}
这是我过滤后的数据返回的内容：
filteredData
[{…}]
0:
children: Array(1)
0:
1: {title: "High Times",subtitle: "On Meeting Thomas King Forcade",category: "Marijuana",body: "Thomas King Forçade created High Times magazine. T…g,with head shops opening up around the country.",image: "thomaskingforcade.jpeg",…}
2: {title: "Oakland Athletics",subtitle: "Win the World Series",category: "Culture",body: "The Oakland A's sweep the World Series against the…as an easy win because the Nats didn't exist yet.",image: "oaklandathletics.jpeg",…}
3: {title: "President Nixon Announces Bombing in Cambodia",subtitle: "Lorem Ipsum Dolor Sit Amet",category: "National",body: "Lorem ipsum dolor sit amet,consectetur adipiscing…aliquet. Fusce varius mattis nisl,in lacinia mi.",image: "nixoncambodia.jpeg",…}
4: {title: "NYPD Foils the french Connection",subtitle: "Real-life bust was the basis for the Oscar-winning film",category: "Opioids",image: "frenchconnection.jpeg",…}
__proto__: Object
length: 1
__proto__: Array(0)
year: "1974"
__proto__: Object
length: 1
__proto__: Array(0)
解决方法
你可以尝试这样的事情 您可以尝试用索引替换硬编码值
{filteredData.map((value,index) => {
return (
<div style={{
height: `600px`,overflow: "scroll"
}}>
<Event
category={value.children[index][++index].category}
title={value.children[index][++index].title}
subtitle={value.children[index][++index].subtitle}
body={value.children[index][++index].body}
image={value.children[index][++index].image}
>
</Event>
<Event
category={value.children[index][index+=2].category}
title={value.children[index][index+=2].title}
subtitle={value.children[index][index+=2].subtitle}
body={value.children[index][index+=2].body}
image={value.children[index][index+=2].image}
>
</Event>
<Event
category={value.children[index][index+=3].category}
title={value.children[index][index+=3].title}
subtitle={value.children[index][index+=3].subtitle}
body={value.children[index][index+=3].body}
image={value.children[index][index+=3].image}
>
</Event>
<Event
category={value.children[index][index+=4].category}
title={value.children[index][index+=4].title}
subtitle={value.children[index][index+=4].subtitle}
body={value.children[index][index+=4].body}
image={value.children[index][index+=4].image}
>
</Event>
</div>
)})}
您的 filteredData.children 的结构可能会得到改进。如果 children 数组中可能有多个索引，那么也许没问题，尽管 children 数组中元素的内容似乎也应该是数组而不是对象。但是我们可以使用 Object.values 解决这个问题。
这里我假设您的 filteredData 和 children 数组可能有多个元素。我还假设您想将每个 filteredData 包装在该 div 中，如果您想将 div 包装在每个 children 元素周围，您必须将 div 移动到 children.map环形。所以我会做这样的事情：
//Map each index in filteredData
filteredData.map(dataItem => {
return (
<div
style={{height: `600px`,overflow: "scroll"}}
>
{/* map each index in the children array */}
{dataItem.children.map((child,childIndex) => {
//Converting the object in each index of children into an array and immediately mapping over that array
//read docs for Object.values,Object.keys and Object.entries for more info on this.
Object.values(child[childIndex]).map(eventItem => {
return (
<Event
category={eventItem.category}
title={eventItem.title}
subtitle={eventItem.subtitle}
body={eventItem.body}
image={eventItem.image}
/>
)
})
})
}
</div>
)
})
我还没有运行此代码，但它应该可以工作，可能需要稍作调整。通过这种循环所有内容的方式，您现在可以随意扩展 filteredData，每个项目的 children 和所有这些 children 数组的每个索引都将呈现为 Event组件。