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

Question

1. 我正在尝试使用反应添加搜索过滤器，并使用 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();
   

   }, []);

   返回 ( { 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 被初始化为一个数组：你可能只是把它们弄混了 :)