英文:
What could be causing my second React JSX function to fail to return <li> elements, despite properly filtered data?
问题
我正在创建一个在React JSX中的简单搜索栏元素。我尝试渲染包含搜索查询内容的元素列表。基本上，我将所有元素的数组，然后使用.filter()函数查找包含查询的所有内容。然后我使用.map()函数遍历结果，并为每个对象渲染<li>元素。我需要为两个不同的数据集创建两个不同的函数，因为一个数组更深层次。
第一个函数运行良好，并返回了一个<li>元素，正如预期的那样。但是出于某种原因，第二个函数却没有返回任何元素，即使它基本上是相同的代码。奇怪的是数据是存在的，我可以从map函数中记录它，我可以看到它被正确地过滤了。有人能解释一下问题出在哪里吗？我尝试了很多我可能犯的错误，但没有找到任何问题。
英文:
I am creating a simple search bar element in React JSX. I'm trying to render a list of elements that include whatever is in a search query. I basically take an array of all the elements and then I use .filter() function to find everything that includes the query. After that I use .map() function to loop through the results and render <li> elements for each object. I needed to create two different functions for two different datasets as one is an array deeper.
<ul>
{
this.state.searchQuery &&
this.props.searchDB.projects.filter((project)=> {
if (this.state.searchQuery === '' || this.state.searchQuery === null) {
return project;
} else if (project.projectName.toLowerCase().includes(this.state.searchQuery.toLowerCase())) {
return project;
} else {
return null
}
}).map((project, index) => {
//THIS WORKS AS EXPECTED
return(
<li key={'project_' + index}>
{index + '_' + project.projectName}
</li>
)
})
}
{
this.state.searchQuery &&
this.props.searchDB.mentions.forEach((mentionYear) => {
mentionYear.filter((mention) => {
if (this.state.searchQuery === '' || this.state.searchQuery === null) {
return mention
} else if (mention.mentionTitle.toLowerCase().includes(this.state.searchQuery.toLowerCase())) {
return mention
} else {
return null
}
}).map((mention, mentionIndex) => {
console.log(mention.mentionTitle)
//THIS LOGS DATA AS IT SHOULD BUT DOESN'T RENDER ELEMENTS
return(
<li key={'project_' + mentionIndex}>
{mentionIndex + '_' + mention.mentionTitle}
</li>
)
})
}
)
}
</ul>
The first function works fine and returns a <li> element as it should. For some reason the second one does not and it doesn't return any element at all, even though it is basically the same code. Strange is that the data is there, I can log it from the map function and I can see that it is filtered properly. Can someone explain to me what's wrong? I tried quite a lot of possibile mistakes I could have made but I didn't find anything.
答案1
得分: 1
第二个版本从.map()的结果中不做任何处理。它在forEach()回调内部调用，但其结果被丢弃。与第一个版本相比，第一个版本中.map()的结果是JSX的一部分并进行渲染。
不要使用forEach()来做这个。如果意图是.forEach()迭代应该像第一个版本一样产生一个结果，那么你需要的不是forEach()，而是.map()。
例如：
{
this.state.searchQuery &&
this.props.searchDB.mentions.map((mentionYear) => {
return mentionYear.filter((mention) => {
// etc.
}).map((mention, mentionIndex) => {
// etc.
});
})
}
基本上，重复你已经知道在JSX中迭代集合以产生渲染结果的相同模式/结构。
英文:
The second version never does anything with the result of .map(). It's invoked inside a forEach() callback, but its result is discarded. Contrast that to the first version where the result of .map() is part of the JSX and rendered.
Don't use forEach() for this. If the intent is that the .forEach() iteration should produce a result just like in the first version, then what you want isn't forEach(). What you want is .map().
For example:
{
this.state.searchQuery &&
this.props.searchDB.mentions.map((mentionYear) => {
return mentionYear.filter((mention) => {
// etc.
}).map((mention, mentionIndex) => {
// etc.
});
})
}
Basically, repeat the same pattern/structure you already know works when iterating over a collection in JSX to produce a rendered result.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论