TypeError：无法读取 React-hooks 中未定义的属性“toLowerCase”

Posted 2023-02-22

【中文标题】TypeError：无法读取 React-hooks 中未定义的属性“toLowerCase”

【英文标题】：TypeError: Cannot read property 'toLowerCase' of undefined in React-hooks

【发布时间】：2021-04-08 07:41:44

【问题描述】：

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

如果您删除“toLowerCase”，下一个“包含”将失败。我不断收到错误消息。

数据接收没有任何问题。

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

来自控制台日志的数据。

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

const Searchs = () => 
  const url = "https://www.thecocktaildb.com/api/json/v1/1/search.php?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;

【参考方案1】：

这里有两个变化

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

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

toLowerCase 是一个函数。像toLowerCase()一样使用

【参考方案2】：

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

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

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