等待获取数据后如何修改数据反应axios

Question

我正在尝试从我的 API 获取数据然后对其进行修改， 我试过这个：

const [reports, setReports] = useState([]);
const [workers, setWorkers] = useState([]);
const [newReports, setNewReports] = useState([]);

useEffect(() => {
  (async () => {
    await get_user_data().then((dataRes) => {
      axios
        .get('/api/reports/?my_business=' + dataRes.id)
        .then((dataRes) => {
          setReports(dataRes.data);
          return dataRes.data[0].my_business;
        })
        .then((dataRes) => {
          axios
            .get('/api/workers/?my_business=' + dataRes)
            .then((dataRes) => {
              setWorkers(dataRes.data);
            })
            .then(() => {
              setNewReports(fix_data());
            });
        });
    });
  })();
}, []);

我得到了 reports 和 workers，但是当我设置 newReports 时，我只会在第一次渲染中得到它们，如果我刷新我丢失新报告中的数据，这是因为 setNewReports(fix_data()) 不等待 reports 和 workers 被获取。

这是我的fix_data() 函数：

function fix_data() {
  let w = {};
  let r = {};
  let rep = [];

  reports.forEach((report) => (w[report.worker_id] = workers.find((worker) => worker.id === report.worker_id)));
  reports.forEach(
    (report) => (
      (r = report), (r.worker_id = w[report.worker_id].first_name + ' ' + w[report.worker_id].last_name), rep.push(r)
    ),
  );
  return rep;
}

我的 useEffect 函数有什么问题？我确实在 then 内部调用了 setNewReports(fix_data()) 那么为什么它不等待获取数据呢？ 谢谢

Answer 1

const [reports, setReports] = useState([]);
const [workers, setWorkers] = useState([]);
const [newReports, setNewReports] = useState([])

const get_reports = async (dataRes) =>{
   const Report_Res = await axios.get('/api/reports/?my_business=' + dataRes.id)
   setReports(Res.data); 
} 

const get_worker_data = async (dataRes)=>{
   const Worker_Res = await axios.get('/api/workers/?my_business=' + dataRes)
   setWorkers(dataRes.data);
}

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

useEffect(()=>{
  get_reports(dataRes)
  get_worker_data(dataRes)
},[dataRes])

useEffect(()=>{
  setNewReports(fix_data())
},[reports, workers])

@alaa yahia 如果你练习干净的代码会更好。 :)

1.尝试将每个 api 调用封装在单独的函数中。它看起来更简洁易懂。

1. 调用useEffect中的函数。看第一个 useEffect。他们将填充用户数据的状态。第二个 useEffect 获取依赖于 DataRes 的工作人员和报告数据。所以在第二个 useEffect 的依赖数组中添加 DataRes。

2. 在第三个 useEffect 中调用 setNewReports(fix_data())。并且它会确保它在报告和工人数据存在时修复数据。查看第三个 useEffect 末尾的依赖数组 - [reports, workers]。这意味着当这些 [reports, workers] 发生变化时，此 useEffect 将运行。

N.B- 我没有运行就编写了这些代码。如果出现任何打字错误，请见谅。

Answer 2

这是对@black lotus 的answer 进行小幅修复后有效的代码：

const [reports, setReports] = useState([]);
const [workers, setWorkers] = useState([]);
const [newReports, setNewReports] = useState([]);
const [dataRes, setDataRes]= useState([]);

const get_reports = async (dataRes) =>{
const Report_Res = await axios.get('/api/reports/?my_business=' + dataRes)
setReports(Report_Res.data);
}

const get_worker_data = async (dataRes)=>{
   const Worker_Res = await axios.get('/api/workers/?my_business=' + dataRes)
   setWorkers(Worker_Res.data);
}
const get_user = async (dataRes)=>{
   const user_Res = await get_user_data()
   setDataRes(user_Res);
}

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

useEffect(()=>{
  get_worker_data(dataRes)
  get_reports(dataRes)

},[dataRes])

useEffect(()=>{
  setNewReports(fix_data())
},[reports, workers])