React解耦Drupal区块多语言API请求问题求助

因为你已经基于i18next实现了基础UI翻译，直接利用i18next提供的当前语言标识来动态拼接API地址即可，步骤如下：

1. 导入i18next的useTranslation钩子
   在组件文件顶部添加导入语句：

   import { useTranslation } from 'react-i18next';
   

2. 获取当前语言并拼接API地址
   在组件内部获取当前语言，然后动态生成带语言前缀的API URL：

   const [showPosts, setShowPosts] = useState();
   // 从i18next获取当前语言实例
   const { i18n } = useTranslation();
   // 取当前语言，默认 fallback 到英文
   const currentLang = i18n.language || 'en';
   // 拼接带语言前缀的API路径
   const apiUrl = `/${currentLang}/rest/slider-custom.json`;
   
   let displayData;
   async function pullJson() {
     try {
       const response = await fetch(apiUrl);
       const responseData = await response.json();
       displayData = responseData.map(function(tour) {
         // 你的数据映射逻辑
       });
       // 记得更新状态触发组件渲染
       setShowPosts(displayData);
     } catch (error) {
       console.error('获取轮播数据失败:', error);
     }
   }
   

3. 适配Drupal API路径格式
   如果你的Drupal多语言REST API不是用路径前缀（比如用查询参数），可以调整URL拼接方式：

   const apiUrl = `/rest/slider-custom.json?lang=${currentLang}`;
   

注意：确保Drupal后台已经为对应语言配置了REST API端点，并且前端有足够的访问权限。

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