如何在React中使用Axios在单击时使用不同类别进行API调用?

huangapple go评论85阅读模式
英文:

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(&quot;&quot;);
  useEffect(() =&gt; {
    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) =&gt; {
    setCategory(e.target.value);
  };
&lt;li value=&quot;Seafood&quot; onClick={onClickHandler}&gt;
     Seafood
&lt;/li&gt;

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(&#39;&#39;);

  useEffect(() =&gt; {
    if (category) {
      axios
        .get(`{url}${category}`)
        .then(function (response) {
          console.log(response.data.meals);
        })
        .catch(function (error) {
          console.log(error);
        });
    }
  }, [category]);

  const onClickHandler = (e) =&gt; {
    setCategory(e.target.getAttribute(&#39;value&#39;));
  };

  return (
    &lt;ul&gt;
      &lt;li value=&quot;Seafood&quot; onClick={onClickHandler}&gt;
        Seafood
      &lt;/li&gt;
      {/* Add more li elements with different categories and onClickHandler */}
    &lt;/ul&gt;
  );
}

答案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 &lt;ol&gt; 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(&quot;data-value&quot;));
};
&lt;li data-value=&quot;Seafood&quot; onClick={onClickHandler}&gt;
    Seafood
&lt;/li&gt;
英文:

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 &lt;ol&gt; 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) =&gt; {
  setCategory(e.target.getAttribute(&quot;data-value&quot;));
};
&lt;li data-value=&quot;Seafood&quot; onClick={onClickHandler}&gt;
    Seafood
&lt;/li&gt;

huangapple
  • 本文由 发表于 2023年6月5日 01:41:44
  • 转载请务必保留本文链接:https://go.coder-hub.com/76401670.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定