（反应）当我从 API 获取一些数据时，如何阻止我的 web 应用程序重新渲染？

Question

I made a web app that fetches and displays information about random countries using the REST countries API ( https://restcountries.eu/ ). Something that bugs me and I don't understand why it happens (I've been running over and over the code and I don't see the problem) is that when I press the "New Country" button, I see that it displays briefly a country, and then re-renders the App, and brings another country. It's more of a nuisance, but I'd like to get it fixed because it's not very smooth. Thoughts? Thank you!

import React, {useState, useEffect} from "react"

function CountryInfo() {
    const [loading, setLoading] = useState(true)
    const [countryName, setCountryName] = useState("")
    const [countryCapital, setCountryCapital] = useState("")
    const [countryPopulation, setCountryPopulation] = useState(0)
    const [countryRegion, setCountryRegion] = useState("")
    const [countrySubRegion, setCountrySubRegion] = useState("")
    const [countryArea, setCountryArea] = useState(0)
    const [countryFlag, setCountryFlag] = useState("")
    

    function fetchData() {
        fetch("https://restcountries.eu/rest/v2/all")
            .then(response => response.json())
            .then(data => {
                var randomCountry = Math.floor(Math.random() * (data.length - 1) + 1)
                setLoading(false)
                setCountryName(data[randomCountry].name)
                setCountryCapital(data[randomCountry].capital)
                setCountryPopulation(data[randomCountry].population)
                setCountryArea(data[randomCountry].area)
                setCountryRegion(data[randomCountry].region)
                setCountrySubRegion(data[randomCountry].subregion)
                setCountryFlag(data[randomCountry].flag)
            })
    }

    useEffect(() => {
        fetchData()
    }, [])

    return (
        <div className="country-info">
            <div style={{display: loading? 'block' : 'none'}}><p>Loading...Please wait</p></div>
            <div style={{display: loading? 'none' : 'block'}}>
                <h1>Random Country: {countryName}</h1>
                <hr />
                <p>Let's get some facts!</p>
                <p>Capital: {countryCapital}</p>
                <p>Population: {countryPopulation}</p>
                <p>Region: {countryRegion}</p>
                <p>Sub-region: {countrySubRegion}</p>
                <p>Area: {countryArea} km</p>
            </div>
            <img src={countryFlag}></img>
            <form onSubmit={fetchData}><button>New Country</button></form>
        </div>
    )
}

export default CountryInfo

Answer 1

In order to render your component correctly and catch an error whenever something happens during the call to your api, avoid using the boolean type for the loading and use string to describe the status. I did some modification in your code:

import React, {useState, useEffect} from "react"

function CountryInfo() {
    const [loading, setLoading] = useState('idle');
    const [error, setError] = useState('');

    const [country, setCountry] = useState({
      name: '',
      capital: '',
      population: 0,
      region: '',
      subregion: '',
      area: 0,
      flag: ''
    })
    

    function fetchData() {
        setLoading('pending');
        fetch("https://restcountries.eu/rest/v2/all")
            .then(response => response.json())
            .then(data => {
                var randomCountry = Math.floor(Math.random() * (data.length - 1) + 1)
                setCountry(data[randomCountry]);
                setLoading('resolved')
            })
            .catch((error) => {
              setLoading('rejected');
              setError(error);
            })
    }

    useEffect(() => {
        fetchData()
    }, [])

    let content;
    if (loading === 'pending' || loading === 'idle') {
      content = <h1>...Loading</h1>
    } else if (loading === 'rejected') {
      content = <div>
      <div>Oops an error occured:</div>
      <pre>{error.message}</pre>
      </div>
    } else {
      content = (
        <div className="country-info">
            <div style={{display: 'block'}}>
                <h1>Random Country: {country.name}</h1>
                <hr />
                <p>Let's get some facts!</p>
                <p>Capital: {country.capital}</p>
                <p>Population: {country.population}</p>
                <p>Region: {country.region}</p>
                <p>Sub-region: {country.subregion}</p>
                <p>Area: {country.area} km</p>
            </div>
            <img alt='countryFlag' src={country.flag}></img>
            <form onSubmit={fetchData}><button>New Country</button></form>
        </div>
    )
    }

    return content;
}

export default CountryInfo;

For further information check this link Stop using isLoading booleans