尝试从 React 中的 API 获取数据 - TypeError: recipes.map is not a function

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

从你的第一个片段开始，不确定顶级执行上下文中的这个 return 语句是否正确或你打算做什么。

return {

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

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

所以你对 Object.entries 所做的事情是不正确的。很简单，将数组 props 与 JSX 中的 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 的内容。