从理智CMS获取数据时，React状态不确定

Question

我最近关注了一个有关将CMS集成到您的网站的教程。教程使用了理智的CMS，使过程非常直观。完成教程后，我准备在自己的项目中使用它。

但是，当我尝试使用使用效果挂钩获取数据时，我会发现一个错误：无法读取未定义的属性。我知道这是因为获取数据已完成异步。但是我无法缠绕我的头是与教程完全相同的方式。他没有使用任何状态来加载或取消。所以我的问题是我做什么与教程不同，该如何解决？

我真的不想使用加载状态，因为那看起来并不好...

这是我从API中收到的JSON对象：

[{…}]
0:
buttonlabel: "Start learning"
description: "Ranging from beginner to pro level tricks. Wanna know the best way to learn a trick? You can search for it down below and find a tutorial from one of our trainers as well as a detailed explanation. Still stuck? Come ask us at a Westsite training moment."
intro: "Welcome to the Westsite trick progression guide. Here you can find a collection of all the wakeboarding tricks you can think of.  "
_createdAt: "2022-05-24T16:26:13Z"
_id: "a4f8cf02-4b86-44d5-a63d-c95a3a7d3293"
_rev: "QYLgvM20Eo53w3noOOj0MB"
_type: "hero"
_updatedAt: "2022-05-24T17:29:10Z"

这是教程组件：

import React, { useState, useEffect } from "react";
import { motion } from "framer-motion";
import { urlFor, client } from "../../client";
import { AppWrap, MotionWrap } from "../../wrapper";

import "./About.scss";

const About = () => {
  const [abouts, setAbouts] = useState([]);

  useEffect(() => {
    const query = '*[_type == "abouts"]';

    client.fetch(query).then((data) => setAbouts(data));
  }, []);

  return (
    <div>
      <h2 className="head-text">
        I know that
        <span> Good Design </span>
        <br />
        means
        <span> Good Business</span>
      </h2>

      <div className="app__profiles">
        {abouts.map((about, index) => {
          return (
            <motion.div
              whileInView={{ opacity: 1 }}
              whileHover={{ scale: 1.1 }}
              transition={{ duration: 0.5, type: "tween" }}
              className="app__profile-item"
              key={about.title + index}
            >
              <img src={urlFor(about.imgUrl)} alt={about.title} />
              <h2 className="bold-text" style={{ marginTop: 20 }}>
                {about.title}
              </h2>
              <p className="p-text" style={{ marginTop: 10 }}>
                {about.description}
              </p>
            </motion.div>
          );
        })}
      </div>
    </div>
  );
};

export default AppWrap(
  MotionWrap(About, "app__about"),
  "about",
  "app__whitebg"
);

这是我的：

import React, { useState, useEffect } from "react";
import { motion } from "framer-motion";
import { BiRightArrowAlt } from "react-icons/bi";

import { client } from "../../client";
import "./Hero.scss";

const Hero = () => {
  const [heroContent, setHeroContent] = useState([]);

  useEffect(() => {
    const query = '*[_type == "hero"]';

    client.fetch(query).then((data) => setHeroContent(data));
  }, []);

  const content = heroContent[0];

  return (
    <div className="app__hero">
      <motion.div
        className="app__hero-content-container"
        whileInView={{ opacity: [0, 1], x: [500, 0] }}
        transition={{ duration: 1, ease: "easeOut" }}
      >
        <div className="app__hero-content">
          <h2 className="heading-text">
            Learn
            <span className="highlighted"> wakeboarding </span>
            the right way
          </h2>
          <p className="p-text">{content.intro}</p>
          <p className="p-text">{content.description}</p>
          <button className="primary-btn p-text app__flex">
            {content.buttonlabel}
            <BiRightArrowAlt />
          </button>
        </div>
      </motion.div>
    </div>
  );
};

export default Hero;

Answer 1

在将数据应用于

const content = heroContent[0];

初始渲染上的状态异步之前，该行将引起问题，Herocontent是一个空数组，因此content> content将不确定直到加载数据为止。几个选项 -
1-渲染某种加载状态，直到Herocontent已填充-2-

if (!heroContent.length) return <LoadingSpinner />

将试图使用content与Guard子句一起使用的部分

{content && (
  <p className="p-text">{content.intro}</p>
  <p className="p-text">{content.description}</p>
  <button className="primary-btn p-text app__flex">
    {content.buttonlabel}
    <BiRightArrowAlt />
  </button>
)}

Answer 2

当您尝试从content未定义时尝试访问属性时，问题就到了。如果您不想显示任何加载指示器，则在未定义内容时，我会随时显示一些后备。例如

，

<p className="p-text">{content.intro}</p>

您可以使用：

<p className="p-text">{content?.intro ?? '-'}</p>

或类似的东西。

Answer 3

问题是，您在不同级别上分解了状态，从而在状态更改中造成问题。所以，你必须这样做
您将状态称为地图功能，或使用Specfic索引0。

    import React, { useState, useEffect } from "react";
    import { motion } from "framer-motion";
    import { BiRightArrowAlt } from "react-icons/bi";
    
    import { client } from "../../client";
    import "./Hero.scss";
    
    const Hero = () => {
      const [heroContent, setHeroContent] = useState([]);
    
      useEffect(() => {
        const query = '*[_type == "hero"]';
    // this is giving response as array
        client.fetch(query).then((data) => setHeroContent(data));
      }, []);
    
      return (
        <div className="app__hero">
          {heroContent.map((content,index)=>
          <motion.div
            className="app__hero-content-container"
            whileInView={{ opacity: [0, 1], x: [500, 0] }}
            transition={{ duration: 1, ease: "easeOut" }}
            key={index}
          >

            <div className="app__hero-content">
              <h2 className="heading-text">
                Learn
                <span className="highlighted"> wakeboarding </span>
                the right way
              </h2>
              <p className="p-text">{content.intro}</p>
              <p className="p-text">{content.description}</p>
              <button className="primary-btn p-text app__flex">
                {content.buttonlabel}
                <BiRightArrowAlt />
              </button>
            </div>

          </motion.div>}
        </div>
      );
    
    };
    
    export default Hero;