Unhandled Runtime Error TypeError: Cannot read property 'items' of undefined (Next.js, React, AWS)

Question

我正在尝试学习本教程 here。

而且我完全按照那个人说的去做。但每次我遇到同样的错误时：

Unhandled Runtime Error
TypeError: Cannot read property 'items' of undefined

pages/index.js (20:57) @ _callee$

  18 |   });
  19 |   setIsLoading(false);
> 20 |   setListMainDetails(mainDetails.data.listMainDetailss.items[0]);
     |                                                       ^
  21 | }
  22 | if(isLoading || !mainDetails) {
  23 |   return <p>..Loading</p>

而且我真的不知道该怎么办了。

如果我从头开始构建，或者如果我克隆那个人的 repo 并使用我的放大凭据进行身份验证，我会得到同样的错误。

这是完整的 index.js 代码：

import Head from 'next/head';
import { useState, useEffect } from 'react';
import Link from 'next/link';
import { API } from 'aws-amplify';
import { listMainDetails } from '../graphql/queries'

export default function Home() {
  let [mainDetails, setListMainDetails] = useState(null);
  let [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    fetchListMainDetailss()
  },[])
  
  async function fetchListMainDetailss() {
    const mainDetails = await API.graphql({
      query: listMainDetails
    });
    setIsLoading(false);
    setListMainDetails(mainDetails.data.listMainDetailss.items[0]);
  }
  if(isLoading || !mainDetails) {
    return <p>..Loading</p>
  }
  return (
    <div className="relative py-3 sm:max-w-xl sm:mx-auto">
      <Head>
        <title>My online C.V</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div className="mt-5 md:mt-5 md:col-span-2">
        <div className="bg-white shadow overflow-hidden sm:rounded-lg">
          <div className="px-4 py-5 sm:px-6">
            <h3 className="text-lg leading-6 font-medium text-gray-900">
              My Online C.V
            </h3>
          </div>
          <div className="border-t border-gray-200">
            <dl>
              <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                <dt className="text-sm font-medium text-gray-500">
                  Name
                </dt>
                <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                  {mainDetails.name}
                </dd>
              </div>
              <div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                <dt className="text-sm font-medium text-gray-500">
                  Last Name
                </dt>
                <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                  {mainDetails.lastName}
                </dd>
              </div>
              <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                <dt className="text-sm font-medium text-gray-500">
                  Email address
                </dt>
                <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                  {mainDetails.email}
                </dd>
              </div>
              <div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                <dt className="text-sm font-medium text-gray-500">
                  Location
                </dt>
                <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                  {mainDetails.location}
                </dd>
              </div>
              <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                <dt className="text-sm font-medium text-gray-500">
                  Description
                </dt>
                <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                  {mainDetails.description}
                </dd>
               </div>
               <div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                <Link href={`/edit/${mainDetails.id}`}>
                  <div className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                    Edit
                  </div>
                </Link>
              </div>
            </dl>
          </div>
        </div>
      </div>
    </div>
  )
}

Answer 1

您可以使用可选的链接语法，如下所示：

setListMainDetails(mainDetails.data.listMainDetailss?.items?.[0]);

如果您想要访问有时 undefined
的对象数据，只需添加 ?. 符号或者您可以在设置状态发生之前检查数据是否存在

// Check if items is not empty array
if(mainDetails?.data?.listMainDetailss?.items?.length) {
  setListMainDetails(mainDetails.data.listMainDetailss.items[0]);
}

Unhandled Runtime Error TypeError: Cannot read property 'items' of undefined (Next.js, React, AWS)

Unhandled Runtime Error TypeError: Cannot read property 'items' of undefined (Next.js, React, AWS)

javascript

reactjs

next.js

aws-amplify