我正在使用 useState 来存储从 api 返回的数据：

function App() {
  const [{ ipAddressData, shouldLoadItems }, setModel] = useState<AppState>({
    ipAddressData: [],
    shouldLoadItems: true,
  });
  const [ipAddress, setIpAddress] = useState("");
  const ipDataUrl = `https://geo.ipify.org/${ipAddress}`;

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(ipDataUrl);
      const data: IpAddress[] = await response.json();
      setModel({
        ipAddressData: data,
        shouldLoadItems: false,
      });
    };
    if (shouldLoadItems) {
      fetchData();
    }
  }, [shouldLoadItems]);


  function inputIp(e: { preventDefault: () => void }) {
    setModel((prevState) => {
      return {
        ...prevState,
        shouldLoadItems: true,
      };
    });
    e.preventDefault();
  }

然后我尝试返回数据，但出现以下错误： Uncaught TypeError：无法读取未定义的属性

const { ip, location, domains, as, isp }: IpAddressData = ipAddressData;

  return (
    <div className="App">
      <main className={mainCss}>
        <h1 className={mainTitleCss}>IP Address Tracker</h1>
        <form className={searchBarContainerCss} onSubmit={inputIp}>
          <input
            type="text"
            placeholder="Search for any IP address or domain"
            className={searchInputCss}
            onChange={(e) => setIpAddress(e.target.value)}
          />
          <input type="submit" value="" className={searchBarButtonCss} />
        </form>
        <Results
          ip={ip}
          location={getLocation(
            location.city,
            location.country,
            location.postalCode
          )}
          timezone={location.timezone}
          isp={isp}
        />

function getLocation(city: string, country: string, postalCode: string) {
  return `${city}, ${country} ${postalCode}`;
}

Results.tsx：

interface IpAddressProps {
  ip: string;
  location: string;
  timezone: string;
  isp: string;
}

const Results: FC<IpAddressProps> = ({ ip, location, timezone, isp }) => {
  return (
    <div className={resultsContainerCss}>
      <div className={resultCss}>
        <div className={resultTitleCss}>IP Address</div>
        <div className={resultInfoCss}>{ip}</div>
      </div>
      <div className={resultCss}>
        <div className={resultTitleCss}>Location</div>
        <div className={resultInfoCss}>{location}</div>
      </div>
      <div className={resultCss}>
        <div className={resultTitleCss}>Timezone</div>
        <div className={resultInfoCss}>UTC {timezone}</div>
      </div>
      <div className={resultCss}>
        <div className={resultTitleCss}>ISP</div>
        <div className={resultInfoCss}>{isp}</div>
      </div>
    </div>
  );
};

export default Results;

存储我的接口的 index.ts：

interface Location {
  country: string;
  region: string;
  city: string;
  lat: number;
  lng: number;
  postalCode: string;
  timezone: string;
  geonameId: number;
}
interface As {
  asn: number;
  name: string;
  route: string;
  domain: string;
  type: string;
}

export interface IpAddressData {
  ip: string;
  location: Location;
  domains: string[];
  as: As;
  isp: string;
}

export interface IpAddress {
  data: IpAddressData;
}

当我 console.log ipAddressData 时，它会按预期从 api 返回数据，所以我不知道问题是什么