Question

我正在创建一个app以便从一个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>
  );
}

Answer 1

如果存在网络错误，则表示您的请求已执行。我认为这里的错误在于您的APP_ID和API_KEY。另一个原因可能是CORS。有关更多详细信息，请访问MDN页。您也可以在开发人员工具（F12）中签出“网络”标签，有时在响应正文中显示错误说明。

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

1 个答案: