问题10 react 组件化更新?

描述

使用toast,来显示react 中出现的提示信息。toast放在render的return里面,状态信息在执行的位置,当状态更新后,显示toast的内容,并自动关闭。

解决

  1. setTimeout显示,绑定到父组件。设500ms附件再显示,会没有刷新显示的内容。

第二种解决办法?

redux里面的内容一直更新,就会一直执行,而redux更新的数据,验证后去掉 验证一块就好了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;
    }
//....

过程

  1. 单纯使用react的组件,绑定toast的显示和关闭的值在父组件。当需要再次出现的时候,不显示,已经和上一个绑定了。
  2. 使用组件更新, react render的时候会一直修改内容。因为是rendux,每次内容或者state都会执行一次的render,如果render里面放函数,那么会一直执行,所以一般事件是放在按钮上获取其他上面
    componentWillReceiveProps(nextProps) {
        this.setState({someThings: nextProps.someThings});
    }
  1. 如果绑定一个状态显示的按钮,点击就会出现。我绑定显示在redux提交上面,所以会先显示上一个toast,执行到现在的时候,会有个刷新显示。
  2. 想到了一个解决的办法?刷新显示,睡一会再显示啦

睡一会

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));

你可能感兴趣的:(问题10 react 组件化更新?)