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

Posted 2023-02-22

【中文标题】无法映射并获取对象数组中存在的数据

【英文标题】：cant map over and fetch the data present inside an array of objects

【发布时间】：2021-12-17 03:28:07

【问题描述】：

我有一个任务，因为我很忙，所以我无法完成，但出于好奇，我正在尝试去做。我有这个 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 来渲染组件，所以这超出了我的想象。 请理解我仍然是初学者，所以是的，请让我知道在这里做什么以及如何实现这一点。感谢您的宝贵时间。

【问题讨论】：

请发布正确的代码并正确格式化您的问题

【参考方案1】：

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

 const  data  = await axios.get(Base_URL);

    return 
        props:  items: data.items ,
    ;

【讨论】：

好的，现在有另一个错误说“错误：在“/”中从getServerSideProps返回的错误序列化.items。原因：undefined无法序列化为JSON。请使用null或省略这个值。”它只会越来越好......数组内部肯定有对象

@ManshulDuggal 您能否发布console.log(data) 的结果以查看 API 响应的结构？