使用 DataTables 的 React-Redux - 需要拉取更新的状态

Question

大家好，第一次发帖，请原谅可能不够详细的内容。简而言之，我正在建立一个使用库 DataTables 并使用 React-Redux 实现的站点。当用户点击我加载组件的链接时，点击一个 thunk，它在 API 端提取所需的数据并返回它。我已经确认数据确实是通过 thunk 返回的。

当我现在尝试显示该数据时，我的问题就出现了。我需要将数据按摩到二维数组中，所以我想我会编写一个函数来处理那部分，唯一的问题是当我通过状态部分时，我认为它太早地抓取并在之前拉出一个空数组thunk 触发器。所以最后我看到的是我传入overview并记录它并得到[]而不是[returned data here]。我对 DataTables 库有点陌生，但认为这不是关于那个，而是更多的 React。任何帮助将不胜感激！

这里是组件，如果我只提供垃圾数据，那么它会成功显示，所以再次认为它更多地是在 React 和 Async 上？

  setTimeout(() => {
    console.log(data[0]); // also logs [], but should be data
  }, 2000);
};

export const SpecialistTodayOverview = props => {
  const dispatch = useDispatch();
  const user = useSelector(state => state.currentUser);
  const overview = useSelector(state => state.SPOverview);
  useEffect(() => {
    dispatch(getSPOverview(user));
    $(document).ready(() => {
      console.log(overview); //logs [], should contain data
       parseData(overview) // see above
      $('#test').DataTable({
        columns: [
          {
            title: 'Col1',
          },
          {
            title: 'Col2',
          },
          {
            title: 'Col3',
          },
        ],
        data: [
          [1, 2, 3],
          [4, 5, 6],
          [7, 8, 9],
        ],
        dom:
          '<"row"<"col-sm-4"B><"col-sm-4 tabletitle"><"col-sm-4"f>>t<"row"<"col-sm-4"i><"col-sm-8"p>><"row"<"col-sm-12"l>>',
      });
    });
  }, []);

  return (
    <div>
      Need to put SpecialistTodayOverview here
      <table id="test" />
    </div>
  );
};

export default SpecialistTodayOverview;

Answer 1

您试图在调用调度函数后立即访问概览，但由于您正在调度一个动作以从服务器获取数据，因此状态不会更新。您可以使用 async/await 来阻止执行，直到调度函数解决。

useEffect(async () => {
 await dispatch(getSPOverview(user));
 $(document).ready(() => {
   console.log(overview); //logs [], should contain data
   parseData(overview) // see above

您需要更新您的 getSPOverview 以返回承诺或将其声明为异步，如下所示：

getSPOverview = async () => {
  const overview = await fetchOverview();
  setOverview(overView);
}