如果数据不存在，如何返回null

Question

我如何对我传递的所有数据使用像if(!testimonials) return null这样的东西。它现在只显示空数组。我不知道该在哪里使用“如果-否则”的规则。

aboutus.tsx

export const getServerSideProps = async ({ params }: any) => {
  
  const query = `{
  'stats': *[ _type == "stats"] {
           _id,
        title,
        stat,
        icon
  },
  'testimonials': *[ _type == "testimonials"] {
    _id,
        description,
        author,
        job,
  },
  'clients': *[ _type == "clients"] {
    _id,
        client,
        mainImage,
  },
}`;
  const props = await sanityClient.fetch(query);

  return { props: { 
     testimonials: props.testimonials,
     clients: props.clients,
     stats: props.stats,
   } 
  }; 
  
};

const aboutus = ({ testimonials, clients , stats}: any) => {
  return (
    <>
      <AboutComponent
        testimonials={testimonials}
        clients={clients}
        stats={stats}
      />
    </>

谢谢你的帮助!

Answer 1

如果三元算子属性可以为null，则可以使用该属性：

<AboutComponent
        testimonials={!testimonials ? null : testimonials}
        clients={clients}
        stats={stats}
      />

Answer 2

我不知道我是否正确理解，但看起来您希望这个组件是动态的

你可以用这个

<>
  {!!testimonials && (
       <AboutComponent
        testimonials={testimonials}
        clients={clients}
        stats={stats}
      />
  )}
</>

这样，您就可以将“证明”转换为布尔值，并且只显示“证明”是否为真的。

如果你需要其他的话，你可以这样做

<>
  {testimonials ? (
       <AboutComponent
        testimonials={testimonials}
        clients={clients}
        stats={stats}
      />
  ) : (
    <h1>testimonials does not exist</h1>
  )}
</>