如何保证table组件在使用状态的时候，即时更新数据？

Question

我在使用zustand做状态管理的时候，

在组件tsx文件内：

  const { projs, getProjs } = useStore()

  useEffect(() => {
    const data = getProjs()
    console.log(' data: ', data, projs)  // 打印： data: undefine []

  }, []); 

projs.store.ts中：

  projs: [],
  getProjs: (ipcRenderer) => {

    ipcRenderer.invoke('getProjs').then((res) => {
      console.log("projs:", res)  // 这里有打印数据 [{...}]
      // set到state
      set({projs: res.data})
    })
  }

但是现在有一个问题，
就是我一个table在组件.tsx中使用projs状态，但是我使用的时候，还未执行set({projs: res.data})，所以是没有数据的。
请问，我要怎么才能保证table是在有数据了之后也即时更新table内容为有数据呢？

<ProForm<{
      table: DispsysProjs[];
    }>
      formRef={formRef}
      initialValues={{
        table: projs,
      }}
      ....

Answer 1

useEffect(() => {
  formRef.current?.setFieldsValue({
    table: projs,
  });
}, [projs]);  

Answer 2

// 打印： data: undefine []

这个是对的 看一下 useEffect 官网解释

Answer 3

试试

const [tableData, setTableData] = useState<DispsysProjs[]>([]);
seEffect(() => {
  setTableData(projs);
}, [projs]);
<ProForm<{
      table: DispsysProjs[];
    }>
      formRef={formRef}
      initialValues={{
        table: tableData,
      }}
      ....