React项目中Sanity.io数据获取失败：表达式解析异常求助

你的问题出在GROQ查询语句的语法错误上——查询末尾多了一个多余的闭合大括号，导致Sanity无法正确解析整个表达式。

看你App.js里的fetch查询：

`*[_type == 'pet']{
  name,
  }
  }`

最后一行的额外}是错误根源，去掉它就能修复解析问题。

修正后的完整App.js代码：

import logo from "./logo.svg";
import "./App.css";
import sanityClient from "./client.js";
import { useEffect, useState } from "react";

function App() {
  const [petData, setPetData] = useState([]);

  useEffect(() => {
    sanityClient
      .fetch(
        `*[_type == 'pet']{
        name
        }`
      )
      .then((data) => setPetData(data));
  }, []);

  return (
    <div className="App">
      {petData.map((pet, index) => (
        <p key={index}>{pet.name}</p>
      ))}
    </div>
  );
}
export default App;

额外补充两点：

• 查询里name后的逗号可以去掉（单字段时不需要尾逗号，更符合语法规范）
• 给map渲染的元素加上key属性，避免React控制台警告

你的Client.js配置没有问题——VISION面板能正常返回结果，说明项目ID、数据集等配置都是正确的，问题仅出在查询语句的语法错误上。

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