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

Question

我正在尝试从 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>
);

我确实尝试了我在此处找到的以下一些修复，但我的数组中的任何食谱都没有被渲染。我在一个白页前，我的地图功能在这里错了吗？

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>
);

感谢任何指点。

Answer 1

从您的第一个 sn-p 开始，不确定顶级执行上下文中的此 return 语句是否正确或您打算做什么。

return {

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

调用receipes api返回一个数组而不是一个对象

所以你对Object.entries 所做的事情是不正确的。很简单，在 JSX 中将数组 props 与 map 函数一起使用。

为了最短的修复，

let arr = receipes.receipes;

附：如果您认为这组 API 数据仅适用于该组件并且不会被共享，请尝试使用 useEffect 挂钩来获取该组件本身内部的数据并进行渲染。

    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>
     );
  }

Answer 2

API 只返回一个对象数组。

要从 API 访问数据，您只需将 map 覆盖为 array 即可

    <div>
        <ul>
            {res.data.map((recipe) =>(
                <div key={recipe.name}>
                    <li>{recipe.name}</li>
                </div>
            ))}
        </ul>
    </div>

Answer 3

你在使用 useEffect 吗？通常这些问题与异步获取和最初获取未定义或空列表等有关，作为数据实际可用之前的道具。如果您正在使用 effect，那么只有在定义了 recipes 时才尝试通过调用 map 来捕获第一个错误。

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