setState异步更新数据导致的问题

背景

子组件使用ProDescriptions组件，通过传入columns和request构建列表。

<Modal
    open={visible}
>
    <ProDescriptions
        columns={columns as any}
        request={getTableRequest as any}
    />
</Modal>

父组件通过调用子组件useImperativeHandle提供的方法，改变visible来控制子组件的渲染

由于ProDescriptions的数据要根据父组件传入的id进行网络请求，所以每次打开的ProDescriptions展示的数据理论上都不一样

useImperativeHandle(ref, () => ({
    show: (id: string) => {
      setJobId(id);
      setVisible(true);
    },
}));

于是请求函数就会通过jobId进行网络请求

但是在关闭该弹窗，重新打开并传入新id后，发现不再进行网络请求并且ProDescriptions渲染的数据与第一次相同

 

解决

• 首先定义了actionRef节点去控制ProDescriptions组件，每次父组件调用show()后进行reload重新渲染。但是除去第一次打开弹窗，后面操作拿到的id都为上一次的id，依然有错。

  const actionRef = useRef<ActionInstance>()
  
  show:(id:string) => {
      setJobId(id)
      actionRef.current?.reload()
  }

• 因为setState()是异步操作，数据更新存在延时性。所以改用useRef定义数据，通过改变ref.current进行数据改变。

  const jobId = useRef<string>('')
  
  show:(id:string) => {
      jobId.current = id
      actionRef.current?.reload()
  }