ReactJS _ Promise-可以在componentDidMount（）方法中初始化函数吗？

Question

我正在构建一个有希望处理我的动画的应用程序。 由于几次试验，我得到以下错误：

警告：无法在尚未安装的组件上调用setState。 这是一项禁止操作的操作，但可能表明您的应用程序中存在错误。 而是直接分配给this.state或定义一个状态= {}; App组件中具有所需状态的class属性。”

为了解决此警告，我将Promise的函数插入componentDidMount（）方法中，从而确保在按以下方式调用时已装入组件：

componentDidMount() {
   this.setExitAnimation=new Promise((resolve, reject)=>{  
        {code here...}
 }

我正在尝试这样做： http ://mverissimo.github.io/tweenslideshow，这是我的沙盒：如果您感兴趣： http ://codesandbox.io/s/64l5xyp2mz-图像组件上有一个bugg跟随其他元素动画而不是触发其特定序列。

这里是我的关于我的诺言的reactJS片段：

 // set animation name 
      // => then callback other functions with the animation name
 setAnimation=()=>{   
    // appreciate if enter or exit flow
    if(this.state.exitLoop){ 
      // if exit flow, trigger the setting for exiting's animation
      this.setExitAnimation.then((anim)=> {  
        // then callback function to trigger the relevant animation °for image or text°
        this.state.elementType === "text"?
          this.triggerTextAnimation(anim)  
          :
          this.triggerImageAnimation(anim) 
      })
    }else{ 
      // if enter flow, trigger the setting for entering's animation
      this.setEnterAnimation.then((anim)=>{ 
        // then callback function to trigger the relevant animation °for image or text° 
        this.state.elementType === "text"?
          this.triggerTextAnimation(anim)  
          :
          this.triggerImageAnimation(anim) 
      });
    }  
  }

// set animation' name in case of enteringOnPage's flow
setEnterAnimation=new Promise((resolve, reject)=>{  
  console.log("in setEnterAnimation")
  // appreciate the element type to select which update todo on state
     // also appreciate the specific animation sequence to set on the state
  if(this.state.elementType ==="text"){
    if(this.state.currentView % 2 === 0){ 
      this.setState({textAnimation:enterDownAnimation});
      resolve(enterDownAnimation);
    }else{
        this.setState({textAnimation:enterUpAnimation}) 
    }    
  }else{ 
    switch(this.state.currentView){ 
      case 0: 
        this.setState({imageAnimation:enterSideAnimation});
        break;
      case 1: 
        this.setState({imageAnimation:enterUpAnimation});
        break;
      case 2: 
        this.setState({imageAnimation:enterDownAnimation});
        break;
      case 3: 
        this.setState({imageAnimation:enterSideAnimation});
        break;
      case 4: 
        this.setState({imageAnimation:enterUpAnimation});
        break;
      default:
        console.log("no animation found")
        break; // test return
    }
  }
})

// set animation' name in case of exitingPage's flow
setExitAnimation=new Promise((resolve, reject)=>{  
   // appreciate the element type to select which update todo on state
      // also appreciate the specific animation sequence to set on the state
  if(this.state.elementType ==="text"){
    if(this.state.currentView % 2 === 0){ 
        this.setState({textAnimation:exitDownAnimation});
        resolve(exitDownAnimation);
    }else{
        this.setState({textAnimation:exitUpAnimation});
        resolve(exitDownAnimation);
    }
  }else{ 
    console.log("currentView: ", this.state.currentView)
    switch(this.state.currentView){ 
      case 0: 
        this.setState({imageAnimation:exitSideAnimation});
        resolve(exitSideAnimation)
        break;
      case 1: 
        this.setState({imageAnimation:exitUpAnimation});
        resolve(exitUpAnimation)
        break;
      case 2: 
        this.setState({imageAnimation:exitDownAnimation});
        resolve(exitDownAnimation)
        break;
      case 3: 
        this.setState({imageAnimation:exitSideAnimation});
        resolve(exitSideAnimation)
        break;
      case 4: 
        this.setState({imageAnimation:exitUpAnimation});
        resolve(exitUpAnimation)
        break;
      default:
        console.log("no animation found")
        break; // test return
    }
  }
}) 

您在Promise环境中如何看待该解决方案？ 更普遍的赞赏？

任何提示都会很棒，

谢谢

Answer 1

一般来说，您做得对。 在componentDidMount进行异步操作是安全的，因为该生命周期挂钩不会阻止渲染。 唯一需要注意的是，它只能运行一次。

如果需要对道具更改做出反应，则可以考虑使用componentDidUpdate ，它具有相反的警告，仅在道具更改时运行，而不在初始渲染后运行。 您也可以考虑使用getSnapshotBeforeUpdate它，在将最近呈现的输出提交到DOM之前立即调用它。 它使您的组件可以从DOM捕获某些信息（例如，滚动位置），然后再对其进行更改。 此生命周期返回的任何值都将作为参数传递给componentDidUpdate（）。