Reactjs 如果array.filter在React中返回0，则呈现一些文本？

我在React组件的render函数中的数组上有一个过滤器：

someArray.filter(item => {
    if (item.name.includes(searchText))return true
}).map(item=>{
    return <h1>{item.name}</h1> 
});

someArray.filter（项=>{
if（item.name.includes（searchText））返回true
}).map（项目=>{
返回{item.name}
});

---

当地图功能未返回任何项目时，如何优雅地显示“无搜索结果”行中的某些文本

有几种方法可以做到这一点。您可以使用三元运算符（也可以缩短回调）：

const filtered=someArray.filter（项=>
item.name.includes（搜索文本）
);
//然后，在JSX中：
{
过滤长度>0？
已筛选的.map（（项，键）=>
{item.name}
)
:
没有搜索结果
}

---

这将检查是否有任何筛选结果。如果是这样，它会将它们映射到具有该项的

名称的
h1
s。如果没有，则只需呈现一个带有文本“无搜索结果”的
h1
。
有几种方法可以做到这一点。您可以使用三元运算符（也可以缩短回调）：

const filtered=someArray.filter（项=>
item.name.includes（搜索文本）
);
//然后，在JSX中：
{
过滤长度>0？
已筛选的.map（（项，键）=>
{item.name}
)
:
没有搜索结果
}

这将检查是否有任何筛选结果。如果是这样，它会将它们映射到具有该项的
名称的
h1
s。如果没有，那么它将只呈现一个带有文本“无搜索结果”的
h1
。
一种可能的方法是，不要将此代码直接放在JSX呈现方法中，而是将其放在一个方法中，然后从呈现中调用该方法

像这样：

_filterItem(){
    const arr = someArray.filter(item => item.name.includes(searchText))

    if(!arr.length) return <div>No data found</div>;

    return arr.map(item => <h1 key={/*some unique value*/}>{item.name}</h1>)
}


render(){
    return(
        <div>{this._filterItem()}</div>
    )
}

\u filterItem（）{
const arr=someArray.filter（item=>item.name.includes（searchText））
如果（！arr.length）返回未找到数据；
返回arr.map（item=>{item.name}）
}
render（）{
返回(
{this.\u filteriem（）}
)
}

建议：

使用
filter
和
map
可以使用简明的箭头体函数而不是块体函数，有关详细信息，请检查
一种可能的方法是，不要将此代码直接放在JSX render方法中，而是将其放在一个方法中，然后从render调用该方法

像这样：

_filterItem(){
    const arr = someArray.filter(item => item.name.includes(searchText))

    if(!arr.length) return <div>No data found</div>;

    return arr.map(item => <h1 key={/*some unique value*/}>{item.name}</h1>)
}


render(){
    return(
        <div>{this._filterItem()}</div>
    )
}

\u filterItem（）{
const arr=someArray.filter（item=>item.name.includes（searchText））
如果（！arr.length）返回未找到数据；
返回arr.map（item=>{item.name}）
}
render（）{
返回(
{this.\u filteriem（）}
)
}

建议：

使用
过滤器
和
映射
可以使用简明的箭头体函数而不是块体函数，有关更多详细信息，请查看
简短：

someArray.map(({name}) => name.includes(searchText) && <h1>{name}</h1>)

someArray.map（（{name}）=>name.includes（searchText）&&{name}）
简洁明了：

someArray.map(({name}) => name.includes(searchText) && <h1>{name}</h1>)

someArray.map（（{name}）=>name.includes（searchText）&&{name}）
>0为我删除了它>0为我删除了它