import { React, useState } from "react";

export default function Home() {
  const [coord, setCoord] = useState({ lat: "", lon: "" });
  const [details, setDetails] = useState({ city: "", state: "" });

  const fetch = (req, res) => {
    fetch(
      `https://api.geoapify.com/v1/geocode/search?city=${details.city}&state=${details.state}&format=json&apiKey=27a84d7b0c1b4d52b41acc3e82bbe239`
    )
      .then((res) => res.json())
      .then(
        fetch(
          `https://api.openweathermap.org/data/3.0/onecall?lat=${res.results.lat}&lon=${res.results.lon}&appid=544ce8f74a895e6f7bd6425293b01b47`
        )
      )
      .then((res) => res.json())
      .then((data) => {
        const { lat, lon } = data.results[0];
        setCoord({ lat, lon });
      });
  };
  return (
    <div>
      <h4>Home</h4>
      <form id="form">
        <p>
          <label htmlFor="city">City: </label>
          <input
            placeholder="City"
            type="text"
            name="city"
            onChange={(e) =>
              setDetails(
                { ...details, city: e.target.value },
                console.log(details)
              )
            }
            value={details.city}
          />
        </p>
        <p>
          <label htmlFor="state">State: </label>
          <input
            placeholder="State"
            type="text"
            name="state"
            onChange={(e) =>
              setDetails(
                { ...details, state: e.target.value },
                console.log(details)
              )
            }
            value={details.state}
          />{" "}
        </p>
        <p>
          <input type="submit" value="Submit" onSubmit={fetch()} />
        </p>
      </form>
    </div>
  );
}

嗯... 首先，您的代码形式有点混乱，您应该声明一个异步函数来处理提交请求。然后您应该有类似以下内容：

// I renamed fetch to fetchFunction because fetch is an already function in node18 or browser
const fetchFunction = async () => {
    // this is your first request and from this u shoul parse your data
    try {
        const response = await(await fetch(`https://api.geoapify.com/v1/geocode/search?city=${details.city}&state=${details.state}&format=json&apiKey=27a84d7b0c1b4d52b41acc3e82bbe239`)).json();

        // and here you should do your second fetch in the same maner
    } catch (error) {
        console.log(error)
    }
}

出现该错误是因为此处存在内存泄漏：

<input type='submit' value='Submit' onSubmit={fetch()} />

正确的形式是（或者如果您采用我的方法，则为“onSubmit={fetchFunction}”）：

<input type='submit' value='Submit' onSubmit={fetch} />

我采用了你的代码并做了一些修改，现在它可以使用了。

import React from "https://cdn.skypack.dev/[email protected]";
import ReactDOM from "https://cdn.skypack.dev/[email protected]";

function App() {
    const [coord, setCoord] = React.useState({ lat: "", lon: "" });
    const [details, setDetails] = React.useState({ city: "", state: "" });
    const fetchFunction = async (event) => {
//         here you should have your preventDefault function, as I said, you receive an event object as paramater in callback function when onSubmit is fired
        event.preventDefault();
        // this is your first request and from this u should parse your data
        try {
            const response = await (await fetch(
                `https://api.geoapify.com/v1/geocode/search?city=${details.city}&state=${details.state}&format=json&                        apiKey=27a84d7b0c1b4d52b41acc3e82bbe239`
            )).json();

            console.log('res', response);
            // and here you should do your second fetch in the same maner
        } catch (error) {
            console.log('eerr', error);
        }
    };

    const weather = [];
    return (
        <div>
            <h4>Home</h4>
            {/* I moved your callfunction on form because here it was refreshing your page */}
            <form id="form" onSubmit={fetchFunction}>
                <p>
                    <label htmlFor="city">City: </label>
                    <input
                        placeholder="City"
                        type="text"
                        name="city"
                        {/* here I made a little change, it was correct and functional but i wannted to be the best practice here, setState can take as parameter a new value or a callback with his previous value as paramater  */}
                        onChange={(e) =>
                            setDetails((previousValue) => ({
                                ...previousValue,
                                city: e.target.value
                            }))
                        }
                        value={details.city}
                    />
                </p>
                <p>
                    <label htmlFor="state">State: </label>
                    <input
                        placeholder="State"
                        type="text"
                        name="state"
                        onChange={(e) =>
                            setDetails((previousValue) => ({
                                ...previousValue,
                                state: e.target.value
                            }))
                        }
                        value={details.state}
                    />
                </p>
                <p>
                    <input type="submit" value="Submit" />
                </p>
            </form>
        </div>
     );
}

ReactDOM.render(<App />, document.getElementById("root"));