在 useEffect React 中调用多个 API 端点

Question

我在为多个 API 端点调用 useEffect 时遇到问题。只加载了一个或另一个。

我的代码：

  const [values, setValues] = useState({
     total: [],
     outstanding: []
    });

 useEffect(() => {
 DataService.dashboard_total_Amount().then((response)=>{ setValues({...values, total: response})})
  ChartService.Outstanding().then((response)=>{setValues({...values, outstanding: response})}) 
   }, [])

希望有人能指出我的问题。谢谢

Answer 1

useEffect 中的函数充当 values 变量的闭包。为确保更新最新值，您可以将函数传递给 setValues:

  const [values, setValues] = useState({
     total: [],
     outstanding: []
    });

 useEffect(() => {
 DataService.dashboard_total_Amount().then((response)=>{ setValues((values) => {...values, total: response})})
  ChartService.Outstanding().then((response)=>{setValues((values) => {...values, outstanding: response})}) 
   }, [])

Answer 2

一个更好的方法做同样的事情，你只更新状态一次，因此它也 re-render 组件一次，这看起来更干净，并尝试使用 try-catch

  React.useEffect(() => {
    const fetchDetails = async () => {
      try {
        const resDataService = await DataService.dashboard_total_Amount();
        const resChartService = await ChartService.Outstanding();
        setValues({ outstanding: resChartService, total: resDataService });
      } catch (error) {
        console.log(erro);
      }
    };
    fetchDetails();
  }, []);

在 useEffect React 中调用多个 API 端点

Call Multiple API endpoint in useEffect React

reactjs

react-hooks