类型错误：无法读取 React-hooks 中未定义的属性“toLowerCase”

问题描述

我正在制作一个搜索栏。但是，出现错误。

如果您删除 'toLowerCase'，下一个 'includes' 将失败。我不断收到错误消息。

数据接收没有任何问题。

你为什么这样做？我是初学者。请帮帮我。

来自控制台日志的数据。

import React,{ useState,useEffect } from "react";
import axios from "axios";

const Searchs = () => {
  const url = "https://www.thecocktaildb.com/api/json/v1/1/search.@R_404_6278@?s";

  const [searchTerm,setSearchTerm] = useState("");
  const [searchValue,setSearchValue] = useState("");
  const [results,setResults] = useState([]);

  useEffect(() => {
    axios
      .get(url)
      .then((res) => {
        console.log(res);
        setResults(res.data.drinks);
        console.log(res.data);
      })
      .catch((error) => {
        console.log(error);
      });
  },[]);
  const searchHandler = (value) => {
    setSearchValue(value);
  };
  let updateUsers = results.filter(({ strdrink }) => {
    return strdrink.toLowerCase.includes(searchValue);
  },[]);
  const handleSearchInputChange = (e) => {
    searchHandler(e.target.value);
  };

  return (
    <Wrapper>
      <form>
        <input
          type="text"
          placeholder="재료 또는 이름을 검색하세요"
          value={searchTerm}
          onChange={handleSearchInputChange}
        />
      </form>
      <ul>
        {(searchValue === "" ? results : updateUsers).map(
          ({ idDrink,strAlcoholic,strDrinkThumb,strDrink }) => (
            <li key={`${idDrink}`}>
              <br />
              {`${strDrink}`} <br />
              {`${strAlcoholic}`} <br />
              {`${strDrinkThumb}`}
            </li>
          )
        )}
      </ul>
    </Wrapper>
  );
};
export default Searchs;

解决方法

这里有两个变化

`return strdrink.toLowerCase.includes(searchValue);`

将 strdrink 更改为 strDrink。键区分大小写

toLowerCase 是一个函数。像 toLowerCase()

一样使用 ,

根据此参考https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase

toLowerCase 是一个函数，你应该调用它，而不是仅仅将它作为一个属性来面对。所以代码应该是这样的：

return strdrink.toLowerCase().includes(searchValue);