ReactJS: Как получить данные из API по нажатию кнопки

Question

Я создаю приложение для извлечения данных из API recipeDB, и сейчас мне нужно нажать на кнопку поиска, чтобы получить 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), где описание ошибки иногда отображается в теле ответа.