ReactJs 当我尝试在搜索栏上过滤时，它会给出类型错误：无法读取未定义的属性(读取"过滤器")

Question

在控制台上，我从json服务器获取数据，但当我尝试键入(过滤(某些内容时，它会给出

1个未处理错误中的1个

未处理的运行时错误TypeError:无法在onChangeHandler上读取未定义的属性(读取"filter"(以筛选

import React, { useEffect, useState } from 'react'

export default function SearchBar() {
const [users,setUsers] = useState ([])
const [text,setText] = useState('');
const [suggestions, setSuggestions] = useState([]);
useEffect (() => {
const loadUsers =async()=>
{
const response = await axios.get('http://localhost:800/content');
setUsers(response.data.content)
console.log(response.data)
}
loadUsers();
},[])
const onSuggestHandler =(text) =>  {
setText(text);
setSuggestions([]);
}
const onChangeHandler = (text) =>{
let matches = []
if (text.length>0)
{
matches = users.filter(user => {
const regex = new RegExp(`${text}`,"gi");
return user.title.match(regex);
})

}
console.log("matches",matches)
setSuggestions(matches)
setText(text)
}
return (
<div className='search'>
<div className='search__container'>
<h1>Search Bar</h1>
<input type="text" 
onChange={e=>onChangeHandler(e.target.value)}
value={text}
onKeyDown={e=>console.log(e)}
/>
{suggestions && suggestions.map ((suggestions,i) =>
<div className='suggestions' key={i}
onClick = {()=>onSuggestHandler(suggestions.title)}
>{suggestions.title}</div>
)}
</div>
</div>
)
}

Answer 1

似乎在有matches = users.filter的行上，用户是未定义的，所以你不能在上面调用filter()。只添加users?.就可以避免崩溃。

但这意味着你有一个逻辑问题，并在某个时候将你的用户设置为未定义。

您可能需要检查您的response.data.content并确定里面有什么。