5.点击事件同时触发,等待数据更新后,再继续后续操作

60 阅读1分钟

项目问题:点击事件同时触发,需要等待保存全局的状态更新后,再继续后续的表单提交之类的

分析:根据async和await实现异步方法

代码实现:

      // 中间函数,当选择的时间有值时,这个值就是点击按钮后向全局存储的值
      const middleChange = async() => {
          return selectTime
      }
      // 监听时间,当选择的时间存在,再进行表单提交,依赖于每次提交后需要将时间重置,因为时间存在全局中,污染模块
      useEffect(() => {
        if(JSON.stringify(selectTime) != '{}'){
          middleChange().then(res => {
            formTicket.current.update();
           })
        }
      },[selectTime])

modal文件

    *main({ payload }, { call, put }) {
      console.log(payload, 'payload')
       yield put({
          type: 'saveData',
          payload: payload,
        });
        return payload
    }

测试文件

    import React, { useEffect, useState, forwardRef, useImperativeHandle, useRef } from 'react'
    import { Button } from 'antd'
    import { useSelector, useDispatch } from 'umi'
    import styles from './index.less'

    // import Copyright from '@/compontents/Copyright';

    const HomePage2 = forwardRef((props, ref) => {
      const dispatch = useDispatch()
      const datam = useSelector(state => state.common.textData)
      useImperativeHandle(ref, () => ({
        update: async() => {
          return await handleclick2();
        },
      }));
      const handleclick2 = async() => {
        // 能拿到最新的datam
        console.log(datam,'qwer')
      }

     return <Button className={styles.homePage}></Button>
    })
    const HomePage3 = () => {
      const dispatch = useDispatch()

      const textHandle3 = async() => {
        return await dispatch({
          type: 'common/main',
          payload: '点击测试'
        })

      }
     return <Button className={styles.homePage} onClick={textHandle3}>HomePage3</Button>
    }
    const HomePage = () => {
      const textRef = useRef(null)
      const dispatch = useDispatch()
      const datam = useSelector(state => state.common.textData)
      useEffect(() => {
        console.log(datam,'jhjhj')
        if(datam){
          console.log(56566,datam)
          textRef.current.update()
        }
      },[datam])

     return <div>
      <HomePage2 ref={textRef}></HomePage2>
      <HomePage3></HomePage3>
      <Button></Button>
     </div>
    }

    export default HomePage