(React)当我从API获取一些数据时，如何阻止我的web应用程序重新渲染

Question

我制作了一个web应用程序，它使用REST国家/地区API获取并显示有关随机国家/地区的信息(https://restcountries.eu/)。让我感到困扰的是，当我按下"；"新国家"；按钮，我看到它会短暂显示一个国家，然后重新渲染应用程序，并带来另一个国家。这更麻烦，但我想把它修好，因为它不太光滑。想法？非常感谢。

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

为了正确地呈现组件，并在调用api的过程中发现错误，请避免使用布尔类型进行加载，并使用字符串来描述状态。我对你的代码做了一些修改：

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;

有关更多信息，请查看此链接停止使用isLoading布尔值