使用Sanity管理数据库时网站条目无法显示的index.js代码问题求助

你的代码存在3处直接导致内容无法渲染的错误，逐一修复即可：

• Props字段名不匹配：组件解构接收的参数是products（复数），但getServerSideProps中返回的props字段是单数product，组件侧拿不到商品列表数据，直接导致商品区域空白。
• 列表渲染参数错误：
  1. Sanity文档的唯一标识字段是_id，不是id，key值写错会触发React渲染错误
  2. 给Product组件传值时只传了product.name字符串，正常应该传入完整的商品对象，否则组件拿不到图片、价格等其他字段无法渲染
• Banner组件传值逻辑缺陷：bannerData.length && bannerData[0] 当banner查询结果为空数组时，length值为0，会直接把数字0传给组件，触发渲染异常。

修正后的完整index.js代码 #

import { client } from '../lib/client';
import {HeroBanner,FooterBanner, Product} from '../components';
const Home = ({ products, bannerData}) => (
  <div>
    <HeroBanner heroBanner ={bannerData?.length ? bannerData[0] : null} />
    <div className="products-heading">
      <h2>Best Selling Product</h2>
      <p>Speakers of many variations</p>
    </div>
    
    <div className="products-container">
    {products?.map((product) =><Product key={product._id} product={product}/>)}
    </div>

    <FooterBanner footerBanner={bannerData?.length ? bannerData[0] : null}/>
  </div>
);

export const getServerSideProps = async () =>{
  const query = '*[_type == "product"]';
  // 修正变量名为复数products，和组件接收字段对齐
  const products = await client.fetch(query);

  const bannerQuery = '*[_type == "banner"]';
  const bannerData = await client.fetch(bannerQuery);

  return{
    props: {products, bannerData }
  }
}

export default Home;

替换文件内容后重启开发服务，即可正常拉取Sanity后台的商品、Banner数据完成渲染。

内容的提问来源于stack exchange，提问作者Ezechiel Kiregha