时间戳

首页 > 解决方案 > ReactJS：如何在按钮单击时从 API 获取数据

reactjs - ReactJS：如何在按钮单击时从 API 获取数据

问题描述

我正在制作一个从 recipeDB API 获取数据的应用程序，现在我需要单击搜索按钮让它 console.log 一些数据。现在它在尝试获取资源时给我一个网络错误。我有这样的代码设置

import React, { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  const API_ID = "0fc98505";
  const API_KEY = "5e81ce76845f459b53f9fbe775e81e53";

  const [recipes, setRecipes] = useState([]);




  const getRecipes = async () => {
    const response = await fetch(
      `https://api.edamam.com/search?q=chicken&app_id=${API_ID}&app_key=${API_KEY}`
    );
    const data = await response.json();
    setRecipes(data)
    console.log(data);

  };

  return (
    <div className="App">
      <button onClick={getRecipes}>Retrive data</button>
    </div>
  );
}

标签： reactjsreact-hooks

解决方案

如果出现网络错误，这意味着您的请求已被执行。我认为这里的错误在于您的 APP_ID 和 API_KEY。另一个原因可能是 CORS。有关更多详细信息，请访问MDN页面。您还可以查看开发人员工具（F12）中的“网络”选项卡，其中有时会在响应正文中显示错误描述。

推荐阅读