项目问题:点击事件同时触发,需要等待保存全局的状态更新后,再继续后续的表单提交之类的
分析:根据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'
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() => {
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