无法映射并获取对象数组中存在的数据

Question

我有一个任务，因为我很忙，所以我无法完成，但出于好奇，我正在尝试去做。我有这个 API https://dev-api.fitnessfuel360.com/app/home 我试图从中获取项目和其中存在的数据。 我目前正在尝试使用正在使用 axios 的 Nextjs。 这就是我的代码现在的样子。

//Index.js file where Base_url is the api
  const { items } = await axios.get(Base_URL);

    return {
        props: { items: items },
    };
}

然后我将 Items 传递给我想要渲染出 items 数组中存在的数据的组件。

//my productSection.js component
   <div>
                {items.map((items) => (
                    <h1>{items.slug}</h1>
                ))}
            </div>

但是这给了我一个错误说 Error: Error serializing `.items` returned from getServerSideProps in "/". Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this value.

那么我如何访问这个 Items 数组中的信息呢？ 作业中提到了一些要点，例如object has 2 properties type and data. Type key decides which component to render and data will be passed to to the component 和Code should not throw error on invalid types in json 我以前没有使用过 key 来渲染组件，所以这超出了我的想象。 请理解我仍然是初学者，所以是的，请让我知道在这里做什么以及如何实现这一点。感谢您的宝贵时间。

Answer 1

axios返回一个带有data属性的响应对象，试着像这样改变你的代码

 const { data } = await axios.get(Base_URL);

    return {
        props: { items: data.items },
    };
}