在 React 中搜索时返回"未找到结果"状态

Question

我试图返回一个div '没有发现结果'的文本，如果输入没有在数据库中找到，我尝试了不同的方式，但div不会呈现，如果它是过滤器回调函数的内部。还有别的办法吗?

{posters ? < Card className="list-group" >
{posters.filter((value) => {
if (search === '' || value.title.toLowerCase().includes(search)) {
return value
}
}).map((posters) => {
return (<MainCard >
<HeaderContainer >
<HeaderCard >

<Name>{posters.title}</Name>
<Name style={{
fontSize: '60px',
color: '#FF10F0',
textAlign: 'center'
}}>{posters.description}</Name>

</HeaderCard>
</HeaderContainer>
</MainCard>)
})
}
</Card > : <Loading />}

Answer 1

是的，最好的方法就是把你的关注点分开

const getPosters = () => {
if(!posters) return <Loading />;

const filtered = posters.filter((value) => {
if (search === '' || value.title.toLowerCase().includes(search)) {
return value;
}
});

if(!filtered.length) return <span>No Results Found</span>

return (< Card className="list-group" >{
filtered.map(({title, description}) => {
return (<MainCard >
<HeaderContainer >
<HeaderCard >

<Name>{title}</Name>
<Name style={{
fontSize: '60px',
color: '#FF10F0',
textAlign: 'center'
}}>{description}</Name>

</HeaderCard>
</HeaderContainer>
</MainCard>)
})
}</Card>);
}
// Your render method
return <div>{ getPosters() }</div>

你也可以把它作为一个组件

const Posters = () => {
...
};
return <div><Posters /></div>

但是这可能会导致不必要的重新渲染海报列表。