Блог

Изображение ошибки это ошибка, которую я получаю после запуска приложения, в чем может быть проблема, когда я визуализирую этот компонент в моем родительском компоненте, но после запуска он показывает, что map не является функцией

 import React, { useState, useEffect } from "react";
`import "./Meals.css";`
import Axios from "axios";
import RecipeCard from "./RecipeCard";
function Meals() {
const APP__KEY = "6d6112cdc44e4e44acb74c969b3624fd";
const [recipes, setRecipes] = useState([]);
useEffect(() => {
    const getdata = async () => {
        const result = await Axios.get(
            `https://api.spoonacular.com/recipes/716429/information?apiKey=${APP__KEY}amp;includeNutrition=true.`
        );
        console.log(result.data);
        setRecipes({
            data: result.data,
        });
    };
    getdata();
}, []);
return (
    <div className="meals">
        {recipes.map((recipe) => (
            <RecipeCard recipe={recipe} />
        ))}
    </div>
);
 

}

экспорт блюд по умолчанию;

Я думаю, что в функции setRecipies вы передаете объект, просто передавая массив result.data предполагая, что result.data является массивом. вы проходите {data:[]} . вот почему вы получаете объект {data:[Array of data]} вместо массива.

правильный способ setRecipies(result.data)

Поскольку вы работаете с recipes as с массивом, вы не должны устанавливать его как объект:

 useEffect(() => {
    const getdata = async () => {
        const result = await Axios.get(
            `https://api.spoonacular.com/recipes/716429/information?apiKey=${APP__KEY}amp;includeNutrition=true.`
        );
        console.log(result.data);
        setRecipes(result.data); // set it as array, not an object
    };
    getdata();
}, []);