如題:這樣一個(gè)交互,在一個(gè)表單異步提交成功完后,希望清空頁(yè)面上的表單控件;1.表單信息都是存在storepostDraft中,初始化進(jìn)入時(shí)反向渲染,頁(yè)面如下:constructor(props){super(props);this.state={start:'',end:'',title:'',content:'',};this.submit=this.submit.bind(this);this.handleChange=this.handleChange.bind(this);}...componentWillMount(){const{postInfo:{postDraft}}=this.props;this.setState(postDraft);}表單提交成功后清空,action代碼如下:exportfunctionsubmitMeeting(meetingInfo){return(dispatch,getState)=>{if(shouldPost(getState().meeting)){returnconsole.log('已經(jīng)在申請(qǐng)會(huì)議中');}dispatch(startPost());returnnewPromise((rev)=>{//模擬ajaxsetTimeout(()=>{rev();},1500);}).then(()=>{dispatch(endPost());dispatch(addMeeting(meetingInfo));dispatch(clearMeeting());//清空store中的postDraft字段},()=>{dispatch(endPost());});};}現(xiàn)在遇到的問題是,在提交成功后stroe里面的postDraft字段已經(jīng)被清空,但是前端頁(yè)面表單里面還是有數(shù)據(jù)的。分析是因?yàn)轫?yè)面本地的state沒有和store中的數(shù)據(jù)反向同步,對(duì)于這個(gè)問題一直沒有特別好的方案:action中的沒有直接調(diào)前端頁(yè)面的清空函數(shù),如submitMeeting(meeting,clearCallback);這個(gè)clearCallback調(diào)用前端頁(yè)面的清空函數(shù);在頁(yè)面componentWillReceiveProps中檢測(cè)store中的數(shù)據(jù)變化,一旦postDraft字段清空了,就調(diào)用前端頁(yè)面的clearCallback;但是這個(gè)方案出發(fā)不穩(wěn)定,會(huì)在表單為空的時(shí)候也會(huì)觸發(fā);請(qǐng)問對(duì)于這個(gè)問題,麻友們一般是怎么處理;感謝
Redux 的異步Action中,如何回調(diào)頁(yè)面中的交互
眼眸繁星
2019-05-24 10:56:13