Json 尝试从React-TypeError中的API获取数据：recipes.map不是函数_Json_Reactjs_Fetch_Next.js

Json 尝试从React-TypeError中的API获取数据：recipes.map不是函数

json reactjs next.js

Json 尝试从React-TypeError中的API获取数据：recipes.map不是函数,json,reactjs,fetch,next.js,Json,Reactjs,Fetch,Next.js,我试图从API中获取数据，并将其作为道具传递到我的组件中。问题是我得到了这种类型的错误。谷歌搜索显示，API似乎返回一个对象，map（）函数需要一个数组。好的，控制台记录了我从API得到的东西，它确实是一个对象。容易修复，对吗？然而，我没有发现任何针对这项工作的修复方法。这是我的原始代码，错误如下： export async function getStaticProps(context) { const res = await fetch("https://rezepte-api-t

我试图从API中获取数据，并将其作为道具传递到我的组件中。问题是我得到了这种类型的错误。谷歌搜索显示，API似乎返回一个对象，map（）函数需要一个数组。好的，控制台记录了我从API得到的东西，它确实是一个对象。容易修复，对吗？然而，我没有发现任何针对这项工作的修复方法。这是我的原始代码，错误如下：

export async function getStaticProps(context) {
const res = await fetch("https://rezepte-api-test.babafresh.de/recipes.json")
const data = await res.json()

return {

    props: { recipes: data }, // will be passed to the page component as props
}

export default function Test(recipes) {
console.log(typeof recipes);
return (
    <div>
        <ul>
            {recipes.map((recipe) =>(
                <div key={recipe.name}>
                    <li>{recipe.name}</li>
                </div>
            ))}
        </ul>
    </div>
);

导出异步函数getStaticProps（上下文）{
const res=等待获取（“https://rezepte-api-test.babafresh.de/recipes.json")
const data=await res.json（）
返回{
props:{recipes:data}，//将作为props传递给页面组件
}
导出默认功能测试（配方）{
控制台日志（配方类型）；
返回(

{recipes.map（（recipe）=>(
{recipe.name}
))}

);

我确实尝试了我在这里找到的以下一些修复，但是没有一个我从数组中得到的配方得到渲染。我在一个白色页面前面，我的映射函数在这里错了吗

export default function Test(recipes) {

let arr = Object.entries(recipes);
return (
    <div>
        <ul>
            {arr.map((recipe) =>(
                <div key={recipe.name}>
                    <li>{recipe.name}</li>
                </div>
            ))}
        </ul>
    </div>
);

导出默认功能测试（配方）{
设arr=Object.entries（recipes）；
返回(

{arr.map（（配方）=>(
{recipe.name}
))}

);

我非常感谢任何指针。

您是否使用useEffect？通常这些问题与异步获取以及在数据实际可用之前作为道具最初获取未定义或空列表等有关。如果您使用的是effect，则仅在定义了配方的情况下通过调用map来捕获第一个错误

对于第二种解决方案：通过记录来检查arr的内容。

是否使用useEffect？通常这些问题与异步获取以及在数据实际可用之前作为道具最初获取未定义或空列表等有关。如果使用effect，则仅当配方已定义时，通过调用map来尝试捕获第一个错误埃德

对于第二种解决方案：通过记录来检查arr的内容。

从您的第一个代码片段中，不确定顶级执行上下文中的返回语句是否正确或您打算执行什么

return {

    props: { recipes: data }, // will be passed to the page component as props
}

对ReceipesAPI的调用返回一个数组而不是一个对象

因此，您使用

Object.entries

所做的操作是不正确的。简单地说，在JSX中使用带有

map

函数的阵列道具

在最短的时间内

让arr=receipes.receipes；

注意：如果您认为这组API数据仅用于此组件，不会被共享，请尝试使用

useffect

hook获取此组件内部的数据并进行渲染

    export default function Test() {
    const [receipes, setReceipes] = useState('');
    
    useEffect(() => setReceipes(await fetch("https://rezepte-api-test.babafresh.de/recipes.json").then(res => res.json())), []);
    
    return (
        <div>
            <ul>
                {receipes.map((recipe) =>(
                    <div key={recipe.name}>
                        <li>{recipe.name}</li>
                    </div>
                ))}
            </ul>
        </div>
     );
  }

导出默认功能测试（）{
const[receipes，setReceipes]=useState（“”）；
useEffect（（）=>setReceipes（等待获取）https://rezepte-api-test.babafresh.de/recipes.json）然后（res=>res.json（）），[]）；
返回(

{receipes.map（（配方）=>(
{recipe.name}
))}

);
}

从您的第一个代码片段中，不确定顶级执行上下文中的此返回语句是否正确或您打算执行的操作

return {

    props: { recipes: data }, // will be passed to the page component as props
}