我试图在react中添加搜索过滤器，但我得到了这个错误

Question

>

我尝试使用react添加Seach过滤器，并使用json数据将其与搜索词匹配

以下是我的代码

常量应用 = （） =

使用效果（（）=

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();

}, []);

返回 （

  {

          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

看起来您正在将< code>query初始化为一个字符串，而不是一个字符串数组。

也许可以尝试改变这一点：

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

自

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

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