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

【问题标题】：TypeError: Cannot read property 'toLowerCase' of undefined in React-hooksTypeError：无法读取 React-hooks 中未定义的属性“toLowerCase”
【发布时间】：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;

【问题讨论】：

标签： reactjs api react-hooks uisearchbar

【解决方案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);

【讨论】：