Reactjs 如何修复WebApp保持渲染状态？

我正在使用React和hook设置一个简单的天气应用程序。然而，我发现该应用程序一直在获取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。默认情况下，每次重新渲染时都会运行useEffect挂钩。如果不需要，可以指定第二个可选参数，请参阅

在您的特定情况下：您可能只希望在城市发生变化时执行效果，因此： useffect/*回调与前面一样*/，[props.city]

---

此外，您应该只在顶层调用钩子，即不在ifs中调用钩子：。您可以将if分支移到useffect的回调中

您可以使用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);

---

然后根据您希望它检查的频率调整时间

欢迎使用SO！我对react不太熟悉，但看起来您只是断章取义地显示了一个组件。我猜是有一些状态变化触发了这个组件中的获取调用。React钩子不是这样工作的。它们必须位于组件的顶层才能正常工作。因此，您要么使用useEffect的本机筛选，使用第二个可选参数，要么在useEffect本身中进行自定义筛选。