Sanity CMS 数据未显示在 React 应用程序上答案

【问题标题】：Sanity CMS data is not showing on the react appSanity CMS 数据未显示在 React 应用程序上
【发布时间】：2022-11-14 01:34:02
【问题描述】：

我正在关注 youtube (https://youtu.be/3HNyXCPDQ7Q) 上的教程来创建投资组合网站。我使用 Netlify 托管了网站，20 天后，当我重新访问该网站时，该网站只是一个空白屏幕。当我在 localhost 上再次测试时，问题出在理智上。当我连接到理智时，屏幕会变黑。现在的问题是常规网站内容是可见的，但是来自 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 变量。例如。项目 ID：process.env.REACT_APP_SANITY_PROJECT_ID 我也尝试过硬编码值。两者似乎都不起作用。

请注意，我还在 CORS 源中添加了 localhost:3000 和网站 url。

请帮助我，我现在被这个问题困扰了几天。

【问题讨论】：

这行aboutsQuery.then((data) => setAbouts(data)); }; 是不必要的，您获取的结果已经在aboutsQuery 上，只需在获取文档后设置状态即可。
作为旁注，由于项目的性质，我认为您没有必要使用token。我假设您没有在项目中编写/更改文档。此外，您可能会在控制台中收到将您的token 暴露给浏览器的警告。

标签： javascript reactjs sanity

【解决方案1】：

我遇到了同样的问题，我可以通过执行以下操作来解决它：

安装dotenv节点包
将 .env 文件移动到 frontend_react 文件夹。（我不小心在 src 文件夹下创建了它）

我希望它也能帮助你。

【讨论】：