ReactJS _ Promise - Можно ли инициализировать функцию в методах componentDidMount ()?

Question

Я создаю приложение с некоторыми обещаниями для обработки моей анимации.Из-за нескольких попыток я получаю следующую ошибку:

Предупреждение. Невозможно вызвать setState для компонента, который еще не подключен.Это не работает, но это может указывать на ошибку в вашем приложении.Вместо этого присвойте this.state напрямую или определите состояние = {};Свойство class с нужным состоянием в компоненте App. ”

Чтобы устранить это предупреждение, я вставил функцию Promise в метод componentDidMount (), поэтому компонент вызывается при вызове следующим образом:

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

Я пытаюсь сделать это: http://mverissimo.github.io/tweenslideshow, вот моя песочница: если вам интересно: http://codesandbox.io/s/64l5xyp2mz - есть ошибка в компоненте изображения, который следует за другим элементоманимация вместо запуска его определенной последовательности.

Вот мой отрывок реагирования на мои обещания:

 // 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
    }
  }
}) 

Что вы думаете об этом решении в контексте Обещания?В целом ценится?

Любой намек был бы хорош,

спасибо

Answer 1

В общем, ты правильно сделал.Безопасно иметь асинхронные операции в componentDidMount, так как этот хук жизненного цикла не предотвращает рендеринг.Единственное предостережение здесь заключается в том, что он запускается только один раз.

Если вам нужно реагировать на изменения реквизита, вы можете рассмотреть возможность использования componentDidUpdate, хотя он имеет противоположное предостережение, запускается только при изменении реквизита, но не после первоначальноговизуализации.Также вы можете рассмотреть возможность использования getSnapshotBeforeUpdate Он вызывается непосредственно перед тем, как последний обработанный вывод будет зафиксирован, например, в DOM.Это позволяет вашему компоненту захватывать некоторую информацию из DOM (например, положение прокрутки) до того, как она потенциально может быть изменена.Любое значение, возвращаемое этим жизненным циклом, будет передано в качестве параметра componentDidUpdate ().