reactjs - 在从 api 获取新数据之前，Redux 状态之前的数据显示几秒钟

Question

我正在使用引导选项卡在组件中显示两个列表数据。一个用于已批准数据的选项卡，另一个用于待处理数据。我正在调用相同的两个 api 来显示两个选项卡数据，但使用 useSelector 使用相同的减速器状态。

对两个选项卡数据更改使用“userData”选择器时出现问题。在第一次加载时，它为待处理的用户获取数据。在已批准的选项卡上单击，3 秒钟显示的数据与已处于减速器状态的待处理选项卡的数据相同，并在从 api 获取批准的数据后刷新选项卡和列表。如何避免这种情况？我们可以先显示空数据而不刷新选项卡和列表吗？这是示例代码。

const [status, setStatus] == useState('Pending');

派遣电话：

const getUsers = (sortData, page, limit, searchword, status) =>
 dispatch(_getUsers(sortData, page, limit, searchword, status));

选择器：

const userData = useSelector(state => state.UserReducer.userList);

The data will be like this:
userData = {
   listData: [],
   activeTabCount: 20,
   nextTabCount: 15
}

选项卡部分：

<Tabs defaultActiveKey="Pending" onSelect={(e) => handleSelect(e)}>
 <Tab eventKey="Pending" title={"Pending ("+status == "Pending" ? userData.activeTabCount : userData.nextTabCount +")"}>
   {userData.listData.map((item) => {
      //List pending items with sort and pagination
   });
   }
 </Tab>
 <Tab eventKey="Approved" title={"Approved("+status == "Approved" ? userData.activeTabCount : userData.nextTabCount+")"}>
   {userData.listData.map((item) => {
      //List approved items with sort and pagination
   });
   }
 </Tab>
</Tabs>

const handleSelect = (key) => {
   if (key === "Pending")
      setStatus("Pending");
      //Api call
   else
      setStatus("Approved");
      //Api call
}

标签： reactjsreact-hooks