在 React 中搜索时返回“未找到结果”状态答案

【问题标题】：Return 'no result found' state on search in React在 React 中搜索时返回“未找到结果”状态
【发布时间】：2021-09-28 10:44:29
【问题描述】：

如果在数据库中未找到输入，我将尝试返回带有“未找到结果”文本的 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 />}

【问题讨论】：

标签： javascript reactjs search frontend

【解决方案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>

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

【讨论】：