使用React的博客，GraphQL，GraphCMS，NextJS，尾风CSS

Question

我正在创建组件=> PostCard.JSX并从graphCMS中提取数据。一切进展顺利，并在components文件夹下创建了更多的文件。我休息了一会就离开了。但是当我再次开始编写代码时，我使用运行了这个应用程序，它给了我这个错误：

error - components/PostCard.jsx (35:27) @ PostCard TypeError:无法读取null 33的属性“名称”34

35 \ alt={post.author.name}

我不知道为什么这个错误现在发生了，然而，应用程序以前是工作的。这是我的PostCard.jsx代码

import React from 'react';
//import Image from 'next/image';
import moment from 'moment';
import Link from 'next/link';



const PostCard = ({ post }) => {

  /* console.log(post); */
            {/* <div>
              {post.title}
              {post.author.name}
              {post.excerpt}
              {post.featuredImage.url}
            </div> */}

    return (
  <div className="bg-white shadow-lg rounded-lg p-0 lg:p-8 pb-12 mb-8">
    <div className="relative overflow-hidden shadow-md pb-80 mb-6">
      <img
        src={post.featuredImage.url}
        alt={post.title}
        className="object-top absolute h-80 w-full object-cover  shadow-lg rounded-t-lg lg:rounded-lg"
        />
    </div>

    <h1 className="transition duration-700 text-center mb-8 cursor-pointer hover:text-pink-600 text-3xl font-semibold">
    <Link href={`/post/${post.slug}`}>{post.title}</Link>
    </h1>

    <div className="block lg:flex text-center items-center justify-center mb-8 w-full">
      <div className="flex items-center justify-center mb-4 lg:mb-0 w-full lg:w-auto mr-8 items-center">
        <img
          alt={post.author.name}
          height="30px"
          width="30px"
          className="align-middle rounded-full"
          src={post.author.photo.url}
        />
        <p className="inline align-middle text-gray-700 ml-2 font-medium text-lg">{post.author.name}</p>
      </div>
      <div className="font-medium text-gray-700">
        <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 inline mr-2 text-pink-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
        </svg>
        <span className="align-middle">
          {moment(post.createdAt).format('MMM DD, YYYY')}
          </span>
      </div>
    </div>
    <p className="text-center text-lg text-gray-700 font-normal px-4 lg:px-20 mb-8">
      {post.excerpt}
    </p>
    <div className="text-center">
      <Link href={`/post/${post.slug}`}>
        <span className="transition duration-500 ease transform hover:-translate-y-1 inline-block bg-pink-600 text-lg font-medium rounded-full text-white px-8 py-3 cursor-pointer">
          Continue Reading
          </span>
      </Link> 
    </div> 
  </div>
    )
};

export default PostCard;

有人能帮忙吗？我试着解决它，但我做不到。

谢谢

Answer 1

试着传递像这样的初始道具

    <div className="lg:col-span-8 col-span-1">
      {
        posts.map((post, index) => (
          <PostCard post={post.node} key={post.title} />

        ))
      }
    </div>

Answer 2

查看一下调用PostCard的家伙，因为它将post.author传递为null。避免向用户显示这种错误的一个好方法是使用悬浮get(post, 'author.name', '')，但这不会解决您的问题，只会避免用户看到它。你的问题在于打电话给PostCard的那个人。