描述
使用toast频伤，來顯示react 中出現(xiàn)的提示信息。toast放在render的return里面芝此，狀態(tài)信息在執(zhí)行的位置憋肖，當(dāng)狀態(tài)更新后因痛，顯示toast的內(nèi)容，并自動關(guān)閉岸更。
解決
- setTimeout顯示鸵膏，綁定到父組件。設(shè)500ms附件再顯示怎炊，會沒有刷新顯示的內(nèi)容谭企。
第二種解決辦法？
redux里面的內(nèi)容一直更新评肆，就會一直執(zhí)行债查，而redux更新的數(shù)據(jù)，驗證后去掉 驗證一塊就好了delete good.goodone瓜挽。
比如
render() {
let goods_data = this.props.state.setGoods.putgood || [];
// console.log("goods_data",goods_data)
let code = goods_data.code || '00000'
console.log(code)
let msg = goods_data.msg || '00000'
switch(code){
case '20100':
let content = "物品提交成功"
this.ToastCenterConfig = {toastClose:this.toastClose,show: this.state.toastShow,content}
this.pushTo("上一頁")
delete goods_data.code
break;
case '20102':
this.ToastCenterConfig = {toastClose:this.toastClose,show: this.state.toastShow,content:msg, delay:3000}
delete goods_data.code
break;
case '20103':
this.ToastCenterConfig = {toastClose:this.toastClose,show: this.state.toastShow,content:msg, delay:3000}
delete goods_data.code
break;
default:
break;
}
//....
過程
- 單純使用react的組件,綁定toast的顯示和關(guān)閉的值在父組件盹廷。當(dāng)需要再次出現(xiàn)的時候，不顯示久橙，已經(jīng)和上一個綁定了俄占。
- 使用組件更新, react render的時候會一直修改內(nèi)容。因為是rendux,每次內(nèi)容或者state都會執(zhí)行一次的render剥汤，如果render里面放函數(shù)，那么會一直執(zhí)行排惨，所以一般事件是放在按鈕上獲取其他上面
componentWillReceiveProps(nextProps) {
this.setState({someThings: nextProps.someThings});
}
- 如果綁定一個狀態(tài)顯示的按鈕吭敢，點擊就會出現(xiàn)。我綁定顯示在redux提交上面暮芭，所以會先顯示上一個toast鹿驼，執(zhí)行到現(xiàn)在的時候，會有個刷新顯示辕宏。
- 想到了一個解決的辦法畜晰？刷新顯示，睡一會再顯示啦
睡一會
export const sleep = async(s = 1) => new Promise((resolve) => setTimeout(resolve,s * 1000));
export const sleepms = async(s = 1) => new Promise((resolve) => setTimeout(resolve,s));
