nextjs getStaticProps用于在服务器上获取构建时数据。React.useState用于在客户机上管理运行时状态
如果获取数据依赖于某些用户交互，请尝试使用useEffect和useState在客户端上执行此操作

function Locality({ data }) {
  const [city, setCity] = useState("13007");
  const [features, setFeatures] = useState({});

  const fetchData = async () => {
    const url = `https://geo.api.gouv.fr/communes?codePostal=${city}&format=geojson`;

    const result = await axios.get(url);
    const data = result.data.features;

    setFeatures(data);
  };

  useEffect(() => {
    fetchData();
  }, [city]);

  return (
    <>
      <input
        value={city}
        type="text"
        placeholder={`Code postale, France`}
        onChange={(e) => {
          setCity(e.target.value);
        }}
      />
      <pre>{JSON.stringify(features, null, 2)}</pre>
    </>
  );
}

您可能还需要研究一下nextjsgetServerSideProps

正如@ksav所指出的，您需要使用一些本地状态，但也需要一个效果来获取数据。
下面是一个示例，如何做到这一点：（未经测试，为想法）

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

type Props = {data:any};

function Locality({data}: Props) {

const [city, setCity] = useState("13000");
// That will contain the result of the fetch
const [isFetching, setIsFetching] = useState(false)
const [result, setResult] = useState(null);
const [error, setError] = useState(null);

useEffect(function fetchResults() {

      const getDataUrl:string = `https://geo.api.gouv.fr/communes?codePostal=${city}&format=geojson`
      setIsFetching(true)
      const result = axios.get(getDataUrl).then(res => {
        const data = result.data

        setResult(data.data[0].attributes)
      }).catch(setError).finally(() => {
        setIsFetching(false)
      })
}

return(

 <input
  list="city"
  type="text"
  placeholder={`Code postale, France`}
  onChange={(e) => {
   setCity(e.target.value) ;
   }}
  />{isFetching && 'Loading...'}
{!error && !isFetching && 
<div>Result for {city}: {result}</div>}
 )
}

如果你使用我或@ksav建议的上述效果，我建议你寻找XHR取消和效果去抖动，以避免当用户在框中键入内容并同时发送许多请求时 * 将 * 发生的错误。例如，如果我键入'75000'，它将发送5个请求，如果第三个请求是最慢的，结果最终可以包含750的结果，而不是75000。