TypeError: Cannot read property 'toLowerCase' of undefined in React-hooks
TypeError: Cannot read property 'toLowerCase' of undefined in React-hooks
我正在制作一个搜索栏。但是,出现错误。
如果擦除 '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.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;
根据这个参考 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase
toLowerCase
是一个函数,您应该调用它而不是仅仅将它作为一个属性面对。所以代码应该是这样的:
return strdrink.toLowerCase().includes(searchValue);
这里有两个变化
`return strdrink.toLowerCase.includes(searchValue);`
将 strdrink
更改为 strDrink
。按键区分大小写
toLowerCase
是一个函数。使用像 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.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;
根据这个参考 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase
toLowerCase
是一个函数,您应该调用它而不是仅仅将它作为一个属性面对。所以代码应该是这样的:
return strdrink.toLowerCase().includes(searchValue);
这里有两个变化
`return strdrink.toLowerCase.includes(searchValue);`
将 strdrink
更改为 strDrink
。按键区分大小写
toLowerCase
是一个函数。使用像 toLowerCase()