我正在使用Openweather API，以获取数据，如单位，天气报告等。我试图创建一个切换的温度变化点击按切换按钮。比如摄氏度到开氏度等等。在下面的代码中，我试图将单元传递给URL，并使用SegmentedControl（它是一个React组件包）来使用切换UI。但值（值：“标准”等），我正在使用的是不能在单位的URL（const url =https://api.openw.....`）。我不知道如何将值传递给URL中的单位，以便温度自动变化，而无需通过任何数学方程。我省略了一些代码行，以获得更好的可见性。

export default function Home() {
  const [weather, setWeather] = useState("");
  const [city, setCity] = useState("");
  const [units, setUnits] = useState();
    const apiCall = async (e) => {
    e.preventDefault();
    const loc = e.target.elements.loc.value;
    const url = `https://api.openweathermap.org/data/2.5/weather?q=${loc}&appid=${apiKey}&units=${units}`;
    const req = axios.get(url);
    const res = await req;
    setWeather({
      descp: res.data.weather[0].description,
      temp: res.data.main.temp,
      city: res.data.name,
      humidity: res.data.main.humidity,
      wind: res.data.wind.speed,
      feel: res.data.main.feels_like,
    });

    setCity(res.data.name);
  };
  const Weath = () => {
    return (
      <div className="container">
    {" "}
        <div>
          <div>
            <Text mr="xs">Units:</Text>
            <SegmentedControl
              value={units}
              onChange={setUnits}
              data={[
                {
                  value: "standard",
                  label: (
                    <Center>
                      <Box>Kelvin</Box>
                    </Center>
                  ),
                },
                {
                  value: "metric",
                  label: (
                    <Center>
                      <Box>Celsius</Box>
                    </Center>
                  ),
                },
                {
                  value: "imperial",
                  label: (
                    <Center>
                      <Box>Fahrenheit</Box>
                    </Center>
                   ),
                },
              ]}
            />
          </div>
        </div>
        <div className="top">
          <div className="text-left">
            <div className="flex gap-2">
              <p className="text-2xl  ">{weather.city}</p>
              <CiLocationOn size={25} />
            </div>
            <div className="text-7xl font-bold">
              {weather.temp}
            </div>
          </div>
        </div>
       .
       .
      .
      </div>
    );
  };
  return (
     <div className="app">
      <div className="search">
        <form onSubmit={apiCall}>
          <input type="text" placeholder="city" name="loc" />
          <button className="bttn">Search</button>
        </form>

        {weather && <Weath />}
      </div>
    </div>
  );
}

我希望根据给定的选项/切换来更改温度。