我正在尝试在反应中添加添加搜索过滤器，但我收到此错误

Question

1. 我正在尝试使用反应添加 Seach 过滤器，并使用 json 数据我试图将其与搜索词匹配

2. 下面是我的代码

   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')

Answer 1

看起来您正在将query初始化为字符串而不是字符串数组。

也许尝试改变这个：

const [query, setQuery] = useState("");

至

const [query, setQuery] = useState([""]);

此外，您的searchTerm被初始化为一个数组：您可能只是将它们混合在一起:)