我在YouTube上看教程（https://youtu.be/3HNyXCPDQ7Q）用于创建一个投资组合网站。我使用Netlify托管网站，20天后当我再次访问网站时，网站只是一个空白屏幕。当我再次在localhost上测试时，问题是sanity。当我连接sanity时，屏幕会变成空白。现在的问题是常规网站内容可见，但是来自sanity的数据没有被提取到react应用。
我已经通过sanity gui在abouts模式中添加了一些文档。
关于方案：

export default {
  name: "abouts",
  title: "Abouts",
  type: "document",
  fields: [
    {
      name: "title",
      title: "Title",
      type: "string",
    },
    {
      name: "description",
      title: "Description",
      type: "string",
    },
    {
      name: "imgUrl",
      title: "ImgUrl",
      type: "image",
      options: {
        hotspot: true,
      },
    },
  ],
};

关于.jsx代码：

import React, { useState, useEffect } from "react";
import { motion } from "framer-motion";

import "./About.scss";
import { urlFor, client } from "../../Client";
import { AppWrapper } from "../../wrapper/";

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

  const querySelector = async () => {
    const query = '*[_type == "abouts"]';
    const aboutsQuery = await client.fetch(query);

    aboutsQuery.then((data) => setAbouts(data));
  };

  useEffect(() => {
    querySelector();
  }, []);

  return (
    <>
      <motion.div
        className="app__about-header"
        whileInView={{ x: [1000, 0] }}
        transition={{ duration: 1 }}
        viewport={{ once: true }}
      >
        <h1 className="head-text">
          <span>About</span> Me
        </h1>
      </motion.div>
      <motion.div
        className="app__about-desc"
        whileInView={{ opacity: [0, 1] }}
        transition={{ duration: 1 }}
        viewport={{ once: true }}
      >
        <h3 style={{ marginBottom: 10 }}>Who I am?</h3>
        <p className="p-text">
          Some text here.
        </p>
      </motion.div>

      <motion.div
        style={{ marginTop: 40 }}
        whileInView={{ x: [-1000, 0] }}
        transition={{ duration: 1 }}
        viewport={{ once: true }}
      >
        <h2 className="head-text">
          What I <span>Love to do?</span>
        </h2>
      </motion.div>
      <div className="app__profiles">
        {abouts.map((about, index) => {
          return (
            <motion.div
              whileInView={{ opacity: [0, 1] }}
              whileHover={{ scale: 1.1 }}
              transition={{ duration: 1, type: "tween" }}
              className="app__profile-item"
              key={index}
              viewport={{ once: true }}
            >
              <img src={urlFor(about.imgUrl)} alt={about.title} />
              <h2 className="bold-text" style={{ marginTop: 20 }}>
                {about.title}
              </h2>
              <p className="p-text">{about.description}</p>
            </motion.div>
          );
        })}
      </div>
    </>
  );
};

export default AppWrapper(About, "about", "app__whitebg");

此Client.js文件将连接到sanity CMS。Client.js代码：

import SanityClient from "@sanity/client";
import imageUrlBuilder from "@sanity/image-url";

export const client = SanityClient({
  projectId: "hard coded value added here",
  dataset: "portfoliodataset",
  apiVersion: "2022-08-11",
  useCdn: true,
  token: "token value here",
});

const builder = imageUrlBuilder(client);

export const urlFor = (source) => builder.image(source);

我已经尝试了在client.js文件中的env变量。例如，projectId：REACT_APP_SANITY_PROJECT_ID和我也尝试了硬编码的值，两者似乎都不起作用。
请注意，我还在CORS源中添加了localhost：3000和网站URL。
请帮帮我，我在这个问题上已经困了好几天了。