时间戳

首页 > 解决方案 > React hook useEffect 首先返回空数组

javascript - React hook useEffect 首先返回空数组

问题描述

我从我的数据库中获取数据，如下所示：

 const clicked = props.clicked;
 const [allEmployees, setAllEmployees] = useState([]);
 const [list, setList] = useState([]);

 useEffect(()=>{       //getting employees
   Axios.get(
     PATH + `/${employees}`
   ).then((data) => {
     setAllEmployees(data.data);
   });
 },[]);

useEffect(()=>{        //getting list of employees who should be selected
   Axios.get(
     PATH + `/${list}`
   ).then((data) => {
     setList(data.data);

     setList(
       allEmployees.map(t=>{
         if(list.includes(t.id)){
           return{
             select: true,
             id: t.id,
             name: t.name
           }
         }else{
           return{
             select: false,
             id: t.id,
             name: t.name
           }
         }
       })
     )
     console.log(allEmployees);// <<
     console.log(list);//  <<
   });
 },[clicked]);

我的问题是我第一次单击按钮，激活clicked.props时，console.log()都显示空数组。在第二次单击后，它们开始工作并显示阵列。我猜我需要以更好的方式更新它们，但不知道如何。（我正在尝试显示数据，但在第一次单击按钮时它确实没有显示任何内容）。

标签： javascriptreactjsreact-hooksuse-effect

解决方案

这是因为它们最初实际上是空数组。Axios 向服务器发送异步请求，获取数据。状态钩子是在第一页渲染之后立即渲染的，所以基本上是同时渲染的。来自服务器的数据将在返回时返回。（因为这是一个承诺）。一旦数据作为承诺返回，您就可以解析它并将解析的数据添加到状态中。

您似乎还试图在第二个 useEffect 中使用不同的数据设置列表状态两次。您首先使用从 axios 获取的数据，然后使用 (allEmployees) 之后的第一个 useEffect 中的数据，我很难在这里真正理解您的思维过程。

推荐阅读