我试图让API调用点击,但我坚持与我的控制台只是显示空。我想在不同的项目点击,不同的API类别将被称为。
const [category, setCategory] = useState("");
useEffect(() => {
axios
.get(`${url}${category}`)
.then(function (response: any) {
console.log(response.data.meals);
})
.catch(function (error: any) {
console.log(error);
});
}, [category]);
const onClickHandler = (e: any) => {
setCategory(e.target.value);
};
<li value="Seafood" onClick={onClickHandler}>
Seafood
</li>
我期待像过滤器按钮点击,然后项目将显示基于您点击的过滤器。
2条答案
按热度按时间ioekq8ef1#
li
元素的value
属性是保留的,它告诉li
在其父ol
中的顺序,正如你在mdn上看到的:此整数属性表示
<ol>
元素定义的列表项的当前序号值。此属性唯一允许的值是数字...您可能需要使用
button
,它将与您的尝试一起工作,并用于处理点击。您可以将其嵌套在li
中。但是,如果出于某种原因,您只需要li
,我建议使用data属性以避免混淆:bqf10yzr2#
我不知道太多,但也许它可以这样工作,我道歉,如果它是错误的。