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

Posted 2023-02-21

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

【英文标题】：I am trying to add add Search filter in react but I am getting this error

【发布时间】：2022-01-23 09:24:03

【问题描述】：

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

, []);

返回 ( 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')

【问题讨论】：

欢迎来到 SO！如果您的代码，您可以修复格式吗？我认为你有一些不合适的地方:)

【参考方案1】：

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

也许尝试改变这个：

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

到

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

另外，你的searchTerm 被初始化为一个数组：你可能只是把它们弄混了 :)

【讨论】：

是的，感谢您发现此问题。现在没有错误了！！

不客气！如果这有帮助，您可以将答案标记为已接受:)