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

o2rvlv0m  于 2023-06-05  发布在  React
关注(0)|答案(2)|浏览(160)

我试图让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>

我期待像过滤器按钮点击,然后项目将显示基于您点击的过滤器。

ioekq8ef

ioekq8ef1#

li元素的value属性是保留的,它告诉li在其父ol中的顺序,正如你在mdn上看到的:
此整数属性表示<ol>元素定义的列表项的当前序号值。此属性唯一允许的值是数字...
您可能需要使用button,它将与您的尝试一起工作,并用于处理点击。您可以将其嵌套在li中。但是,如果出于某种原因,您只需要li,我建议使用data属性以避免混淆:

const onClickHandler = (e: any) => {
  setCategory(e.target.getAttribute("data-value"));
};
<li data-value="Seafood" onClick={onClickHandler}>
    Seafood
</li>
bqf10yzr

bqf10yzr2#

我不知道太多,但也许它可以这样工作,我道歉,如果它是错误的。

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>
  );
}

相关问题