如何获取Fetch响应首个元素的值（Gatsby场景）

一、获取返回数据的首个元素 #

你的代码中已经通过setData(data.value)将接口返回的数组存入状态变量data，但data初始值为null，直接访问data[0]会触发报错，需要先做存在性判断：

方式1：使用可选链操作符（推荐） #

// 在组件函数内部，状态变量data声明后
const firstRezept = data?.[0];
const aenderungsdatum = firstRezept?.aenderungsdatum;

可选链?.会自动判断左侧值是否为null/undefined，避免报错。

方式2：条件判断 #

// 可以在useEffect或者组件渲染逻辑中处理
if (data && data.length > 0) {
  const firstRezept = data[0];
  const aenderungsdatum = firstRezept.aenderungsdatum;
  // 这里可以执行赋值、状态更新等操作
}

另外注意：你的fetch请求没有传入abortCont.signal，导致无法正常中止请求，需要修改fetch调用：

fetch(
  `https://abc.4.azurestaticapps.net/data-api/rest/Rezept?$filter=RezeptId eq ${url_id}`,
  { signal: abortCont.signal } // 新增这一行
)

二、在Gatsby中传递值到其他页面 #

根据场景不同，有三种常用方案：

1. 通过路由状态传递（无URL暴露） #

使用Gatsby的Link组件跳转时，将数据存入state对象：

import { Link } from 'gatsby';

// 在ListRezept组件中，确保data存在时渲染跳转链接
{data && data.length > 0 && (
  <Link
    to={{
      pathname: '/目标页面路径',
      state: {
        aenderungsdatum: data[0].aenderungsdatum,
        fullItem: data[0] // 也可以传递整个元素
      }
    }}
  >
    跳转到详情页
  </Link>
)}

在目标页面通过useLocation获取状态：

import { useLocation } from '@reach/router';

const TargetPage = () => {
  const location = useLocation();
  const { aenderungsdatum, fullItem } = location.state || {};

  return (
    <div>
      <p>修改日期：{aenderungsdatum}</p>
    </div>
  );
};

export default TargetPage;

2. 通过全局Context共享（多页面/组件共享） #

如果需要在多个页面或组件中复用该数据，可以创建全局Context：

第一步：创建Context文件

// src/context/RezeptContext.js
import { createContext, useContext, useState } from 'react';

const RezeptContext = createContext();

export const RezeptProvider = ({ children }) => {
  const [selectedRezept, setSelectedRezept] = useState(null);

  return (
    <RezeptContext.Provider value={{ selectedRezept, setSelectedRezept }}>
      {children}
    </RezeptContext.Provider>
  );
};

export const useRezeptContext = () => useContext(RezeptContext);

第二步：在根组件包裹Provider

在gatsby-browser.js和gatsby-ssr.js中添加：

import { RezeptProvider } from './src/context/RezeptContext';

export const wrapRootElement = ({ element }) => {
  return <RezeptProvider>{element}</RezeptProvider>;
};

第三步：在ListRezept中设置数据

import { useRezeptContext } from '../context/RezeptContext';

const ListRezept = (props) => {
  const { setSelectedRezept } = useRezeptContext();
  // ... 其他状态和逻辑

  useEffect(() => {
    if (data && data.length > 0) {
      setSelectedRezept(data[0]);
    }
  }, [data, setSelectedRezept]);

  // ... 渲染逻辑
};

第四步：在目标页面获取数据

import { useRezeptContext } from '../context/RezeptContext';

const TargetPage = () => {
  const { selectedRezept } = useRezeptContext();

  return (
    <div>
      <p>修改日期：{selectedRezept?.aenderungsdatum}</p>
    </div>
  );
};

3. 通过URL查询参数传递（URL可见） #

如果需要参数在URL中展示，可以拼接查询参数：

import { Link } from 'gatsby';

{data && data.length > 0 && (
  <Link
    to={`/目标页面路径?aenderungsdatum=${data[0].aenderungsdatum}`}
  >
    跳转到详情页
  </Link>
)}

在目标页面解析查询参数：

import { useLocation } from '@reach/router';
import queryString from 'query-string'; // 需要先安装：npm install query-string

const TargetPage = () => {
  const location = useLocation();
  const { aenderungsdatum } = queryString.parse(location.search);

  return <p>修改日期：{aenderungsdatum}</p>;
};

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