React Native使用Sanity Client fetch数据时遇多类错误求助

首先修正useEffect的异步写法 #

你之前直接给useEffect传入async函数会返回Promise，触发警告。正确写法是在effect内部定义异步函数并立即调用：

import { useEffect, useState } from 'react';
// 假设你已经初始化了sanityClient

export default function YourComponent() {
  const [featuredCategories, setFeaturedCategories] = useState([]);

  useEffect(() => {
    const fetchFeaturedData = async () => {
      try {
        const data = await sanityClient.fetch(`*[_type == "featured"] {
          ...,
          restaurant[]-> {
            ...,
            dish[]->,
            type-> {
              name
            }
          }
        }`);
        setFeaturedCategories(data);
      } catch (err) {
        console.error('获取推荐分类数据失败:', err);
      }
    };

    fetchFeaturedData();
  }, []);

  // 组件渲染逻辑
  return <></>;
}

解决URLSearchParams.set is not implemented错误 #

这个错误源于React Native环境未完整实现浏览器的URLSearchParams API，而新版@sanity客户端依赖该API。有两种可行方案：

方案1：降级@sanity/client到v4版本 #

v5+版本的@sanity/client对React Native的支持逻辑有变化，降级到v4.x可直接兼容：

# npm
npm install @sanity/client@4.0.0

# yarn
yarn add @sanity/client@4.0.0

方案2：添加URLSearchParams polyfill #

安装React Native专用的URL polyfill包并全局引入：

1. 安装依赖：

# npm
npm install react-native-url-polyfill

# yarn
yarn add react-native-url-polyfill

2. 在项目入口文件（如App.js或index.js）顶部添加：

import 'react-native-url-polyfill/auto';

额外检查 #

确保你的sanity客户端初始化配置正确，包含必要参数：

import { createClient } from '@sanity/client';

const sanityClient = createClient({
  projectId: '你的项目ID',
  dataset: 'production', // 替换为你的数据集名称
  apiVersion: '2023-05-03', // 使用最新日期格式的API版本
  useCdn: true, // 生产环境建议开启CDN加速
});

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