React中useEffect无法从Sanity获取数据问题求助

1. 修复useState语法错误 #

你误用了对象解构获取useState返回值，但useState返回的是数组，这会导致projects始终为undefined，无法正常渲染数据：

// 错误写法
const {projects, setProjects} = useState([])

// 正确写法
const [projects, setProjects] = useState([])

2. 修正变量作用域与错误捕获 #

query是useEffect内部的局部变量，外部的console.log(query)会直接报错；同时要给fetch添加错误捕获，方便排查请求问题：

export default function Projects() {
  const [projects, setProjects] = useState([])

  useEffect(() => {
    const query = '*[_type == "projects"]'
    console.log('执行查询:', query)
    
    client.fetch(query)
      .then((data) => {
        console.log('返回数据:', data) // 查看实际返回内容
        setProjects(data)
      })
      .catch(err => console.error('请求失败:', err)) // 捕获请求错误
  }, [])

  return (
    <div>
      {projects.map((project, index) => (
        <h1 key={index}>{project.title}</h1> {/* 必须添加key属性 */}
      ))}
    </div>
  )
}

3. 验证Sanity Client配置 #

确保你已正确初始化Sanity客户端，示例配置如下：

import { createClient } from '@sanity/client'

export const client = createClient({
  projectId: '你的项目ID', // Sanity项目页可见
  dataset: 'production', // 你的数据集名称
  apiVersion: '2024-01-01', // 使用最新API版本
  useCdn: true,
})

4. 检查Sanity端配置 #

• 确认projects Schema定义完整，示例：

export const projects = {
  name: 'projects',
  type: 'document',
  title: '项目',
  fields: [
    {
      name: 'title',
      type: 'string',
      title: '项目标题'
    }
    // 其他字段按需添加
  ]
}

• 确认Sanity Studio中已创建并发布至少一条projects类型的文档，空数据会导致fetch返回空数组。
• 检查Sanity后台的CORS设置（Settings → API → CORS origins），确保你的React项目域名在允许列表内。

5. 其他排查动作 #

• 打开浏览器控制台，查看是否存在网络请求错误或JS语法报错。
• 在Sanity Studio的Vision标签中执行*[_type == "projects"]查询，确认能返回数据。

内容的提问来源于stack exchange，提问作者isabella-re