意外令牌 React / JSON

Question

function WeatherApp() {

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>
);

}

I know there are simillar questions but I tried to manage it and didn't work. I'm really stucked and don't know how to solve this problem. I tried another port, put 'Content-Type': 'application/json', 'Accept': 'application/json', changing my code for many diffrent ways but nothing. Network didn't show anything wrong, only console says "WeatherApp.jsx:16 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0" after my getWeather const.

Can anyone help me?

Answer 1

您需要使用https://协议修复 fetch url：

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