我有一個搜索欄，可以過濾包含一個物件的陣列：
const [termList, setTermList] = useState([{term_name: 'Name', definition: 'This is a glossary term'}]);
const filtered = termList.filter((term) =>
Object.values(term).some(
(val) =>
typeof val === "string" &&
term.term_name.includes(searched.toLowerCase())
)
);
return (
<div>
<input
type="text"
value={searched}
onChange={(ev) => setSearched(ev.target.value)}
/>
</div>
<div className="termList">
{filtered.map((term) => (
<div>
<div>{term.term_name.toLowerCase()}</div>
<div>{term.definition}
</div>
))}
</div>
);
但是，當我過濾串列時，如果我在搜索欄中鍵入字母“n”，我的過濾串列是空的，即使陣列中唯一的物件的名稱以“n”開頭。
更奇怪的是，當我在搜索欄中輸入“a”、“am”或“ame”時，我的過濾串列包括該物件。
uj5u.com熱心網友回復：
你讓你searched小寫但不是term.term_name，'n'不在'Name'中，'N'是。你需要做
term.term_name.toLowerCase().includes(searched.toLowerCase())
uj5u.com熱心網友回復：
你也可以這樣做，而不是制作filtered函式
const [termList, setTermList] = useState([{term_name: 'Name', definition: 'This is a glossary term'}]);
return (
<div>
<input
type="text"
value={searched}
onChange={(ev) => setSearched(ev.target.value)}
/>
</div>
<div className="termList">
{termList.filter(item => (search ? item.term_name?.toLowerCase().includes(searched.toLowerCase()) : true)).map((term) => (
<div>
<div>{term.term_name.toLowerCase()}</div>
<div>{term.definition}
</div>
))}
</div>
);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/496955.html
標籤：javascript 反应 数组 筛选