[英]I am trying to add add Search filter in react but I am getting this error
我正在嘗試使用反應添加 Seach 過濾器,並使用 json 數據我試圖將其與搜索詞匹配
下面是我的代碼
const App = () => { const [searchTerm, setSearchTerm] = useState([""]) const [query, setQuery] = useState("");
useEffect(() => { const url = "https://60d075407de0b20017108b89.mockapi.io/api/v1/animals";
const fetchData = async () => { try { const response = await fetch(url); const json = await response.json(); console.log([json].query); setQuery(json.query); } catch (error) { console.log("error", error); } }; fetchData();
}, []);
return (<input type='text' placeholder='search....' onChange={event => { setSearchTerm(event.target.value) }} />
{ query.filter((val) => { if (searchTerm === "s") { return val } else if (val.name.toLowerCase().includes(searchTerm.toLowerCase())) { return val } else return false }).map((val) => { return ( <div className='user' > <p>{val.name}</p> <p>age: {monthDiff(val.bornAt)} months</p> </div> ); })} </div>
); };
當我嘗試執行時,出現以下錯誤,任何人都可以解釋為什么會發生
> Uncaught TypeError: Cannot read properties of undefined (reading
> 'toLowerCase')
看起來您正在將query
初始化為字符串而不是字符串數組。
也許嘗試改變這個:
const [query, setQuery] = useState("");
至
const [query, setQuery] = useState([""]);
此外,您的searchTerm
被初始化為一個數組:您可能只是將它們混合在一起:)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.