意外令牌 React / JSON

Question

功能天氣應用（）{

const [weather, setWeather] = useState("");

useEffect(() => {
    getWeather();
}, []);

const getWeather = async () => {
    const response = await fetch(`api.openweathermap.org/data/2.5/weather?q=Krakow&appid=5eeb633dfbff4cd6c565e326670f0d0d&units=metric`);
    const data = await response.json();
    setWeather(data.weather);
}

return (
    <div className="main-cointainer">
        <form className="search-form">
            <input type="text" className="search-bar"/>
            <button type="submit" className="search-button" >Check</button>
        </form>
        <p>{weather}</p>
    </div>
);

}

我知道有類似的問題，但我試圖解決它並沒有奏效。 我真的被困住了，不知道如何解決這個問題。 我嘗試了另一個端口，輸入 'Content-Type': 'application/json', 'Accept': 'application/json'，以多種不同的方式更改我的代碼，但什么也沒有。 網絡沒有顯示任何錯誤，只有控制台在我的 getWeather const 之后顯示“WeatherApp.jsx:16 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0”。

誰能幫我？

Answer 1

您需要使用https://協議修復 fetch url：

const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=Krakow&appid=5eeb633dfbff4cd6c565e326670f0d0d&units=metric`);