在反应组件渲染上获取json文件，使用异步等待答案

【问题标题】：fetch json file on react component render,using async await在反应组件渲染上获取json文件，使用异步等待
【发布时间】：2022-01-15 09:38:58
【问题描述】：

我需要获取一个包含人名的 json 文件并使用该数据来填充页面。提取应该在组件加载时发生，并且在执行此操作时页面应该呈现“正在加载...”文本。我设法使用 getPeople() 函数。那么，有没有异步等待的方法？

代码：

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>
  )
}

【问题讨论】：

"应该在组件加载时进行获取" - 你的意思是当组件被安装时，或者当模块代码被加载时？
有什么意义？当您需要按顺序执行操作时，使用 async await 很有用。在这里，您只是获取一个 json 文件。顺便说一句，你应该尝试使用 axios 而不是 fetch，更容易使用而且只有一个
"有没有办法通过异步等待来做到这一点？" - 当然，只需将 getPeople 写为 async 函数即可；调用是完全一样的。你试过了吗？你在哪里挣扎？

标签： reactjs json async-await promise fetch

【解决方案1】：

你可以这样做

async function getPeople() {
   let response = await fetch("...")
   let data = await response.json()
    ...assign variables...
}

我真的看不出这样做的原因，因为它与 fetch 相同。如果你更喜欢 await 的美感，你可以将两者结合起来。

async function getPeople() {
   let data = await fetch("...").fetch(response => response.json())
   ...etc...
}

这对您来说可能看起来更好，因为您的代码没有包含在 .then() 括号中。

【讨论】：

你的第二个 sn-p 不起作用
谢谢，现在应该可以使用了