next.js 服务器错误类型：无法读取未定义的属性“map”

rm5edbpk 于 2023-08-04 发布在其他

关注(0)|答案(2)|浏览(142)

我需要帮助来理解如何使用getServerSideProps方法使用服务器端呈现来获取外部数据。我真实的的问题是搜索本身，更具体地说，是返回的数据类型以及如何处理它。我不是一个有经验的JavaScript程序员，所以我认为这更像是一个JavaScript问题，而不是next.js。
这是我在getServerSideProps中获取的地方：

export async function getServerSideProps() {
  const url = `https://...`;
  const options = {
      < header info...> };
  
  const res = await fetch(url, options);

  const data = await res.json();

  const orders = data.list;   **// here is where the problem might be** 

  return { props: { orders } };
}

字符串
这里我从getServerSideProps渲染：

const ListOrders = ({ orders }) => {
  return (
    <div>
      {orders.map((o, i) => (
        <h3 key={i}>{o.orderId}</h3>
      ))}
    </div>
  );
};

型
这里是我获取的对象。我感兴趣的数据是列表。

{

"list":[...]

"data1":[]

"data2":{...}

"data3":{...}

}

型
我会很感激任何帮助。

next.js

来源：https://stackoverflow.com/questions/66379160/server-error-typeerror-cannot-read-property-map-of-undefined

2条答案

按热度按时间

x6h2sr281#

此错误显示数据orders未定义。当你Map的第一件事，如果你没有任何订单数组，你必须添加一个后卫到你的代码，所以你的应用程序不会打破。

<div>
      {orders && orders.map((o, i) => (
        <h3 key={i}>{o.orderId}</h3>
      ))}
    </div>

字符串
这被称为短路，如果定义了orders，则orders.map将运行。
因为你发出了一个API请求。确保API服务器允许你的应用程序执行fetcing。通常你不能从外部服务器获取数据，除非它允许你。
console.log()不在getServerSideProps()内部运行。重要的是，您必须始终检查正在获取的数据。而不是传递orders传递整个数据const data = await res.json()作为prop。return { props: { data } }个
现在在组件内部，console.log(data)查看是否获取过任何数据，如果是，检查结构。

赞(0）回复(0）举报 2023-08-04

l5tcr1uw2#

你应该检查订单数据的结构，然后再开始使用它U只能Map到数组错误说，没有变量名为undefined
例如，如果我们调用函数并将结果分配给变量

let orders =  getServerSideProps()

//The data structure of orders variable be like this 
/*
orders = {  
           props : {
               orders :{ data1 : [  ], data2 : [ ] }
                 } 
  */               } 
// If you map on data1 you need to access like this 
orders.props.orders.data1.map(eachdata=>{
// stuff that you want to do here
})

字符串

赞(0）回复(0）举报 2023-08-04

我来回答

next.js 服务器错误类型：无法读取未定义的属性“map”

2条答案

相关问题

热门标签

最新问答