如何在getStaticProps中获取函数组件状态以发起对应URL请求？

首先要明确：getStaticProps 是Next.js在构建阶段执行的方法，完全运行在服务端/构建环境中，无法访问客户端组件里的city状态（因为状态是客户端浏览器运行时才存在的），所以你没法把客户端的state传递给它。

正确的做法是在客户端组件内部，监听city的变化，实时发起请求：

修改后的组件代码 #

import React, { useState, useEffect } from "react";
import axios from 'axios'

type Props = { initialData?: any };
type CommuneAttributes = {
  // 根据API返回结构定义类型，示例字段：
  nom: string;
  codePostal: string;
  // 可补充其他需要的属性
};

function Locality({ initialData }: Props) {
  const [city, setCity] = useState("13000");
  const [data, setData] = useState<CommuneAttributes | null>(initialData || null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  // 监听city变化，带防抖的API请求
  useEffect(() => {
    const timer = setTimeout(async () => {
      if (!city.trim()) {
        setData(null);
        setError(null);
        return;
      }

      setLoading(true);
      setError(null);
      try {
        const getDataUrl = `https://geo.api.gouv.fr/communes?codePostal=${city}&format=geojson`;
        const result = await axios.get(getDataUrl);
        if (result.data.features.length > 0) {
          setData(result.data.features[0].properties);
        } else {
          setError("未找到对应城市");
          setData(null);
        }
      } catch (err) {
        setError("请求失败，请稍后重试");
        setData(null);
      } finally {
        setLoading(false);
      }
    }, 500); // 500ms防抖，避免输入时频繁请求

    return () => clearTimeout(timer);
  }, [city]);

  return (
    <div>
      <input
        list="city"
        type="text"
        placeholder={`Code postale, France`}
        value={city}
        onChange={(e) => setCity(e.target.value)}
      />

      {loading && <p>加载中...</p>}
      {error && <p style={{ color: 'red' }}>{error}</p>}
      {data && (
        <div>
          <h3>城市信息：</h3>
          <p>名称：{data.nom}</p>
          <p>邮编：{data.codePostal}</p>
          {/* 可添加其他属性展示 */}
        </div>
      )}
    </div>
  );
}

// 可选：用getStaticProps预加载初始默认数据（比如13000）
export async function getStaticProps() {
  try {
    const getDataUrl = `https://geo.api.gouv.fr/communes?codePostal=13000&format=geojson`;
    const result = await axios.get(getDataUrl);
    const initialData = result.data.features[0]?.properties || null;

    return {
      props: {
        initialData,
      },
    };
  } catch (err) {
    return {
      props: {
        initialData: null,
      },
    };
  }
}

export default Locality;

关键说明 #

• getStaticProps仅适合预渲染初始固定数据，用户后续输入的city需通过客户端useEffect触发请求，更新组件状态。
• 加入防抖处理，避免用户输入过程中频繁调用API，减少服务器压力和不必要请求。
• 增加加载、错误状态提示，提升用户交互体验。
• 建议替换any类型为明确的接口定义（如CommuneAttributes），增强代码类型安全和可读性。

内容的提问来源于stack exchange，提问作者Matt Freelance Web