英文:
How can I make API calls on click with different categories in React using Axios?
问题
我正在尝试在点击时进行API调用,但我的控制台只显示null。我希望在不同的项目点击时调用不同的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>
我期望像筛选按钮一样点击,然后根据您点击的筛选器显示项目。
英文:
I am trying to get api call on click, but I'm stuck with my console just showing null. I want on different items clicks, different api categories would be called.
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>
I was expecting like filter buttons to click, and then items would show up based on the filter you click.
答案1
得分: 0
const [category, setCategory] = useState('');
useEffect(() => {
if (category) {
axios
.get({url}${category}
)
.then(function (response) {
console.log(response.data.meals);
})
.catch(function (error) {
console.log(error);
});
}
}, [category]);
const onClickHandler = (e) => {
setCategory(e.target.getAttribute('value'));
};
return (
- 海鲜
{/* 添加更多具有不同类别和onClickHandler的li元素 */}
);
英文:
I don't know much but maybe it can work like this, I apologize if it is wrong.
const [category, setCategory] = useState('');
useEffect(() => {
if (category) {
axios
.get(`{url}${category}`)
.then(function (response) {
console.log(response.data.meals);
})
.catch(function (error) {
console.log(error);
});
}
}, [category]);
const onClickHandler = (e) => {
setCategory(e.target.getAttribute('value'));
};
return (
<ul>
<li value="Seafood" onClick={onClickHandler}>
Seafood
</li>
{/* Add more li elements with different categories and onClickHandler */}
</ul>
);
}
答案2
得分: 0
The value
property of a li
element is reserved, and it tells the order of the li
in its parent ol
, as you can read on mdn:
>This integer attribute indicates the current ordinal value of the list item as defined by the <ol>
element. The only allowed value for this attribute is a number...
You would wanna use a button
, which will work with your attempt and is made for handling clicks. You could nest it in your li
. But if, for some reason, you want only the li
, I would suggest a data attribute to avoid confusion:
setCategory(e.target.getAttribute("data-value"));
};
<li data-value="Seafood" onClick={onClickHandler}>
Seafood
</li>
英文:
The value
property of a li
element is reserved, and it tells the order of the li
in its parent ol
, as you can read on mdn:
>This integer attribute indicates the current ordinal value of the list item as defined by the <ol>
element. The only allowed value for this attribute is a number...
You would wanna use a button
, which will work with your attempt and is made for handling clicks. You could nest it in your li
. But if, for some reason, you want only the li
, I would suggest a data attribute to avoid confusion:
const onClickHandler = (e: any) => {
setCategory(e.target.getAttribute("data-value"));
};
<li data-value="Seafood" onClick={onClickHandler}>
Seafood
</li>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论