reactjs 我一直得到“无法读取未定义的属性(阅读'map')”

smdnsysy 于 2022-12-18 发布在 React

关注(0)|答案(4)|浏览(151)

我目前正在使用Nextjs 13来构建我的前端，我想从一个链接中获取一个.joson，并使用它来填充我的网站使用服务器端渲染，但我一直得到这个错误“无法读取未定义的属性（阅读'map'）”当我使用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可以定义如下：获取静态属性（）：通知Next组件在生成时填充props并呈现为静态HTML页面的方法。getServerSideProps（）：一个方法，告诉Next组件在运行时填充属性并呈现为静态HTML页面。

reactjs

来源：https://stackoverflow.com/questions/74781470/i-keep-getting-cannot-read-properties-of-undefined-reading-map

4条答案

按热度按时间

2admgd591#

你想先问数组是否存在：

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

如你所见我在“todos”后面加了个问号
试试看

赞(0）回复(0）举报 2022-12-18

8yoxcaq72#

我们应该检查todos是否为空/未定义。因为你没有初始化变量（todos=[]）。所以我们可以通过添加（？）符号或&&来检查空/未定义。

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

替代解决方案

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

赞(0）回复(0）举报 2022-12-18

az31mfrm3#

尝试在todos之后使用可选的链接操作符（？.），当您尝试访问的对象未定义或为空时，它将返回undefined，而不是抛出错误消息。

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

赞(0）回复(0）举报 2022-12-18

mwkjh3gx4#

谢谢大家的帮助，使用“console.log（）”后，我发现了错误的来源，我传递的数据是未定义的。
任何一个面临同样问题的人。

解决方案如下：

而不是使用以下代码：

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

使用此：

export async function getServerSideProps(){
  const res = await fetch('https://www.jsonkeeper.com/b/4G1G')
  const data = await res.json()

  return {
    props: {data}}
}

发生错误的原因是我返回数据的方式
然后，你可以使用返回的 prop 和循环槽它做任何你想要的与说的 prop 。

export default function Home({data}) {
  
  let displayData
  displayData = data.map(function(todo){
    return( 
    <p className=' text-black' key={todo.id}>{todo.location}</p>
    )
  })
  // console.log(displayData)

  return ( 

    <div>
     <Head>
        <title>PAPA AIRBNB</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
    </Head>  
 
      {displayData}

    </div>
  )
}

型

赞(0）回复(0）举报 2022-12-18

我来回答

reactjs 我一直得到“无法读取未定义的属性(阅读'map')”

4条答案

相关问题

热门标签

最新问答