我不断收到 \"\"Cannot read properties of undefined (reading \'map\')\"\"答案

【问题标题】：I keep getting ""Cannot read properties of undefined (reading 'map')""我不断收到 \"\"Cannot read properties of undefined (reading \'map\')\"\"
【发布时间】：2022-12-16 13:24:14
【问题描述】：

我目前正在使用 Nextjs 13 来构建我的前端，我想从链接中获取一个 .joson 并使用它来使用服务器端渲染来填充我的网站，但我不断收到此错误“无法读取未定义的属性（读取'地图')" 当我使用 getstaticprops 时一切正常，但是当我使用 getserversideprops 时遇到此错误。

我不想使用静态端生成，因为我的网站必须处理数据库中的更改。谁能帮忙

My directory

    export async function getServerSideProps(){
      const res = await fetch("https://www.jsonkeeper.com/b/4G1G");
      const data = await res.json();
    
      return {
        props: {
          todos: data
        }
      }
    }

    export default function Home({ todos }) {
      return (
        // {styles.container}
        <div className="bg-white">
         <Head>
            <title>PAPA AIRBNB</title>
            <meta name="description" content="Generated by create next app" />
            <link rel="icon" href="/favicon.ico" />
        </Head>
    
        {todos?.length === 0 ? (
          <div>
            loading...
          </div>
        ) : (
          todos.map((todos) => (
            <div key={todos.id}>
              <p>
                {todos.id}: {todos.title}
              </p>
            </div>
          ))
        )}
        </div>
      )
    }

我读过有关 getStaticProps 和 getServerSideProps 的定义，如下所示： getStaticProps()：一种方法，它告诉 Next 组件填充道具并在构建时呈现到静态 HTML 页面中。 getServerSideProps()：一种告诉 Next 组件填充道具并在运行时呈现到静态 HTML 页面中的方法。

【问题讨论】：

标签： javascript reactjs next.js getserversideprops

【解决方案1】：

你想先问数组是否存在：

 todos?.map((todos) => (
            <div key={todos.id}>
              <p>
                {todos.id}: {todos.title}
              </p>
            </div>

如您所见，我在“todos”之后添加了一个问号

试试看

【讨论】：

它最初不会显示 loading 块
对不起，你能稍微解释一下吗？
如果 todos 为 null，他们想要显示 loading... div。
你不应该像这样做然后 todos 吗？.length === NULL 我不是 100$ 当然

【解决方案2】：

当todos为空值时，todos?.length将返回空值。因此，todos?.length === 0 将返回 false，它将执行到三元组中的第二个块 todos.map(..)。那会抛出一个错误

或者，将默认值添加到 todos：

export default function Home({ todos = [] })

或者，另一种在 if 条件下使用可选链接的模式是：

todos?.length !== 0 
 ? todos.map(..)
 : (<div> loading...</div>)

如果todos为null或todos.length为0，则在这种情况下将执行第二个块。

【讨论】：