React中如何访问JSON API内嵌URL指向的二级JSON接口并渲染数据

你需要在组件中新增状态存储检验接口的返回数据，在检测到inspection-link地址存在时主动发起请求，拿到数据后再做渲染，不要直接输出URL文本。
核心逻辑分三步：

• 用useState定义三个状态，分别存储接口返回的检验报告数据、加载状态、请求错误信息
• 用useEffect监听inspection-link的取值变化，地址有效时发起HTTP请求，同时处理请求竞态、组件卸载时的资源清理，避免内存泄漏
• 按加载中、加载失败、加载成功三个分支分别渲染对应内容，拿到数据后按照接口返回的JSON结构编写渲染逻辑即可

改造后的完整代码 #

import { useState, useEffect } from 'react';
// 若项目中已引入对应hooks无需重复导入

const PeriodicAnnualInspectionReport = ({
  lang,
  jsonDataProduct,
}: Props_PIReport) => {
  const [inspectionData, setInspectionData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  useEffect(() => {
    const targetUrl = jsonDataProduct?.["inspection-link"];
    // 无有效地址时重置状态
    if (!targetUrl) {
      setInspectionData(null);
      setLoading(false);
      setError('');
      return;
    }

    const abortController = new AbortController();
    const loadData = async () => {
      setLoading(true);
      setError('');
      try {
        const response = await fetch(targetUrl, {
          signal: abortController.signal,
          // 接口需要跨域携带cookie、自定义请求头时可在此处配置
          // credentials: 'include',
          // headers: {}
        });
        if (!response.ok) throw new Error('Request failed');
        const data = await response.json();
        setInspectionData(data);
      } catch (err) {
        // 忽略组件卸载触发的请求取消错误
        if (err.name !== 'AbortError') {
          setError(outputEnFr(
            'Failed to load inspection report',
            "Échec du chargement du rapport d'inspection",
            lang
          ));
        }
      } finally {
        if (!abortController.signal.aborted) {
          setLoading(false);
        }
      }
    };

    loadData();
    // 组件卸载或URL变更时取消未完成的请求
    return () => abortController.abort();
  }, [jsonDataProduct?.["inspection-link"], lang]);

  return (
    <div className="container">
      <div className="row">
        <div className="col-lg-12">
          <h2>
            {outputEnFr(
              "Periodic Annual Inspection Report",
              "Rapport d'inspection annuel périodique",
              lang
            )}
          </h2>
          {/* 加载状态 */}
          {loading && <p>{outputEnFr("Loading report...", "Chargement du rapport...", lang)}</p>}
          {/* 错误状态 */}
          {error && <p className="text-danger">{error}</p>}
          {/* 数据渲染区域 */}
          {inspectionData && !loading && !error && (
            <div className="inspection-report-content">
              {/* 调试阶段可以先用下面的代码直接格式化输出完整JSON，确认字段结构后替换成业务组件
              <pre>{JSON.stringify(inspectionData, null, 2)}</pre>
              */}
              {/* 示例：按返回字段渲染，替换成你实际的接口字段即可
              <p>Report ID: {inspectionData.reportNo}</p>
              <p>Inspection Date: {inspectionData.checkDate}</p>
              <p>Result: {inspectionData.pass ? 'Pass' : 'Fail'}</p>
              */}
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default PeriodicAnnualInspectionReport;

• 如果项目使用axios、react-query、SWR等请求库，直接把示例中的fetch逻辑替换成对应库的写法即可，核心的状态监听、请求触发、数据存储逻辑不变
• 示例中预留了多语言适配的文案，和你现有组件的多语言逻辑保持一致
• 如果请求时出现跨域报错，需要让后端接口配置CORS规则允许你的站点域名访问，或者在自身服务端加一层接口代理转发

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