我在React 中處理Typeahead組件。
目前，我只是通過基于文本輸入的資料過濾資料，然后對其進行映射以將過濾后的選項顯示到 DOM。這正在發生，但如果搜索沒有產生任何結果，我想顯示“未找到任何專案”。
以下是我退貨的方式<li></li>：
<ul className="search-container__dropdown" onClick={(e) => e.stopPropagation()} style={{ display: show ? 'block' : 'none' }}>
{comments.length > 0 ? comments
.filter(({ body, name }) => {
if (!input) return true;
if (body.includes(input) || name.includes(input)) {
return true;
}
return false
})
.map(({ id, name, body, notfound }, index, arr) => {
return (
<li onClick={() => handleClick(id)} className={`search-container__option ${id === cur_section ? "active" : ""}`}
key={id}
value={name}>
<strong>name: </strong>{name},<br />
<strong>body: </strong>{body}
</li>
)
}) : <NothingFound />}
</ul>
這是 NothingFound 組件：
function NothingFound() {
return <li>Nothing found</li>
}
我錯過了什么？
提前致謝！
uj5u.com熱心網友回復：
您必須先過濾，然后檢查過濾后評論的長度，如下所示：
const filteredComments = comments
.filter(({ body, name }) => {
if (!input) return true;
if (body.includes(input) || name.includes(input)) {
return true;
}
return false;
})
return (<main>
...
{filteredComments.length > 0 ? (
filteredComments
.map(({ id, name, body, notfound }, index, arr) => {
return (
<li ...
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/447807.html
標籤：javascript 反应 字典 筛选
上一篇：覆寫資料框字典中的資料框