如何对从useEffect获取的数据使用react批处理多个setStates？
如何对从useEffect获取的数据使用react批处理多个setStates？
提问于 2021-02-09 22:11:40
我仍然在试图弄清楚react如何处理渲染，这个特殊的行为让我整天都在挠头。当我运行这段代码时，我得到了3个控制台日志。第一个是null，因为useEffect尚未运行，这是意料之中的。接下来，我如期从我的api调用中获得了获取的worldData数组。然而，我随后得到了第三个控制台日志，其中包含相同的数组，这让我相信我的组件正在被重新呈现。如果我添加另一个set state和另一个api调用，我会看到另一个控制台日志。
function App() {
const [worldData, setWorldData] = useState(null)
const [countriesData, setCountriesData] = useState(null)
useEffect(() => {
const fetchData = async () => {
const [world, countries] = await Promise.all([
fetch("https://disease.sh/v3/covid-19/countries?yesterday=true").then(res => res.json()),
fetch("https://disease.sh/v3/covid-19/all?yesterday=true").then(res => res.json())
])
.catch((err) => {
console.log(err)
})
setWorldData(world)
setCountriesData(countries)
}
fetchData();
}, []);
console.log(worldData);似乎每次我设置一个State时，react都在渲染，这就是我认为它的设计目的。然而，我在其他地方读到过，当在useEffect中一起设置时，react将多个设置状态一起批处理。那么为什么我的set状态没有被批处理呢？是因为异步代码吗？如果是这样，有没有一种方法可以获取多个端点并同时设置所有检索到的数据，以便我的组件只需要重新渲染一次？
回答 1
Stack Overflow用户
发布于 2021-02-09 22:49:18
几个比特
(1)如果您只关心单个状态更新，那么您可以定义单个状态并进行相应的更新
const [fetched_data, updateFetchedData] = useState({world:null, countries:null});
...
// where *world* and *countries* are variables containing your fetched data
updateFetchedData({world, countries})
...
fetched_data.world // using the fetched data somewhere(2)然而，您的代码不应该关心接收多个更新，而应该迎合它……
您的useState应该定义空结果的外观，例如，而不是
const [worldData, setWorldData] = useState(null); // probably shouldn't look like this怎么样
const [worldData, setWorldData] = useState([]); // this is what an empty result set looks like在任何同时使用世界和国家数据的组件中(我假设其中一个引用了另一个，这就是为什么你想同时更新两个数据)，只要放一个条件语句，如果没有找到，就放一些字符串'Loading‘或'NA’或任何东西，直到它被加载。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66120679
复制相关文章
相似问题
腾讯云开发者
