使用异步等待，在react组件呈现上获取json文件
使用异步等待，在react组件呈现上获取json文件
提问于 2021-12-10 18:21:20
我需要获取一个包含人名的json文件，并使用该数据填充页面。抓取应该在组件加载时发生，并且在加载过程中，页面应该呈现一个“加载.”我成功地使用了getPeople()函数.then，有什么方法可以在异步等待的情况下实现吗？
代码：
import React from 'react'
import {useState,useEffect} from 'react'
import People from './People'
const component = () =>{
const getPeople = () =>{
fetch('file.json'
,{
headers : {
'Content-Type': 'application/json',
'Accept': 'application/json'
}
}
)
.then((res) => res.json())
.then((myJson) => {
const males_names = myJson?.males?.map(({name,last_name}) => name + " "+ last_name);
const females_names = myJson?.females?.map(({name,last_name}) => name + " "+ last_name);
setLoading(false);
setmales(males_names);
setFemales(females_names);
})
}
const [pageIsLoading,setLoading] = useState(true);
const [males,setMales] = useState([]);
const [females,setFemales] = useState([]);
useEffect(()=>getPeople(),[]);
return (
<div>
{pageIsLoading ? 'Loading...' : <People people={{males,females}} };
</div>
)
}回答 1
Stack Overflow用户
发布于 2021-12-10 18:29:05
你可以做这样的事
async function getPeople() {
let response = await fetch("...")
let data = await response.json()
...assign variables...
}我不太明白这样做的原因，因为它和fetch是一样的。如果你更喜欢等待的感觉，你可以把两者结合起来。
async function getPeople() {
let data = await fetch("...").fetch(response => response.json())
...etc...
}这在您看来可能更好，因为您的代码没有包装在.then()括号中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70308849
复制相关文章
相似问题
腾讯云开发者
