ReactJS:点击按钮，如何从API获取数据

Question

我正在制作一个应用程序，从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(中的"网络"选项卡，其中有时会在响应正文中显示错误描述。