Question

我正在使用React和Hooks设置一个简单的气象应用程序。但是，我发现该应用程序一直在获取API。我该如何阻止呢？

function WeatherInfo (props) {
    const [wind,setWind] = useState(undefined);
    const [precipitation,setPrecipitation] = useState(undefined);
    const [humidity,setHumidity] = useState(undefined);
    const [pressure,setPressure] = useState(undefined);

    if (props.city) {
        useEffect(() => {
            fetch(`https://api.openweathermap.org/data/2.5/weather?q=${props.city}&units=metric&APPID=af081727ae6d5c4cbe2cd266b726e632`).then(results => {return results.json();}
            ).then(data => setWind(data.wind.speed))
        })
        useEffect(() => {
            fetch(`https://api.worldweatheronline.com/premium/v1/weather.ashx?key=a5bf94fc16c84928acb114156182311&q=${props.city}&num_of_days=1&tp=24&format=json`).then(results => {return results.json();}
            ).then(data => setPrecipitation(data.data.weather[0].hourly[0].chanceofrain))
        })
        useEffect(() => {
            fetch(`https://api.openweathermap.org/data/2.5/weather?q=${props.city}&units=metric&APPID=af081727ae6d5c4cbe2cd266b726e632`).then(results => {return results.json();}
            ).then(data => setPressure(data.main.pressure))
        })        
        useEffect(() => {
            fetch(`https://api.openweathermap.org/data/2.5/weather?q=${props.city}&units=metric&APPID=af081727ae6d5c4cbe2cd266b726e632`).then(results => {return results.json();}
            ).then(data => setHumidity(data.main.humidity))
        })


    }
    return (
        <div>
            {props.city &&  
            <div>
                <p>Wind of {props.city} is {wind}</p>
                <p>Chance of rain of {props.city} is {precipitation}%</p>
                <p>Humidity of {props.city} is {humidity}</p>
                <p>Pressure of {props.city} is {pressure}</p>
            </div>
            }
        </div>
    )
}

export default WeatherInfo;

预期结果：函数仅一次获取API

Answer 1

默认情况下，useEffect挂钩在每次重新渲染时都运行。如果您不想这样做，可以指定第二个可选参数，请参见https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects。

在您的特定情况下：您可能只想在城市变化时执行效果，所以： useEffect(/* callbacks as before */, [props.city])。

此外，您应该仅在顶层（即，不在ifs中）调用钩子：https://reactjs.org/docs/hooks-overview.html#%EF%B8%8F-rules-of-hooks。您可以将if分支移到useEffect的回调中

Answer 2

您可以使用setInterval来限制代码运行的频率

setInterval(function(){
    if (props.city) {
        useEffect(() => {
            fetch(`https://api.openweathermap.org/data/2.5/weather?q=${props.city}&units=metric&APPID=af081727ae6d5c4cbe2cd266b726e632`).then(results => {return results.json();}
            ).then(data => setWind(data.wind.speed))
        })
        useEffect(() => {
            fetch(`https://api.worldweatheronline.com/premium/v1/weather.ashx?key=a5bf94fc16c84928acb114156182311&q=${props.city}&num_of_days=1&tp=24&format=json`).then(results => {return results.json();}
            ).then(data => setPrecipitation(data.data.weather[0].hourly[0].chanceofrain))
        })
        useEffect(() => {
            fetch(`https://api.openweathermap.org/data/2.5/weather?q=${props.city}&units=metric&APPID=af081727ae6d5c4cbe2cd266b726e632`).then(results => {return results.json();}
            ).then(data => setPressure(data.main.pressure))
        })        
        useEffect(() => {
            fetch(`https://api.openweathermap.org/data/2.5/weather?q=${props.city}&units=metric&APPID=af081727ae6d5c4cbe2cd266b726e632`).then(results => {return results.json();}
            ).then(data => setHumidity(data.main.humidity))
        })}}, 10000);

然后只需调整您希望检查频率的时间

如何修复WebApp保持呈现状态？

2 个答案: