jsx-eslint/eslint-plugin-react

Should react/no-did-mount-set-state trigger on ES2017 async componentDidMount?

Open

#1 110 ouverte le 10 mars 2017

Voir sur GitHub
 (16 commentaires) (21 réactions) (0 assignés)JavaScript (8 630 stars) (2 797 forks)batch import
bughelp wanted

Description

The rule react/no-did-mount-set-state triggers error on async componentDidMount function for a deferred setState. Basically, this.setState() is being called here after an async operation has been completed. It is not re-rendering straight after mounting, but only after some data has been retrieved from a server. Does it make sense to error on this?

async componentDidMount() {
    try {
      await someAsyncOperation();
    } catch (e) {
      this.setState({errorMessage: 'Failed to load data!'});
    }
  }

Guide contributeur

Stack technique
javascriptreact
Domaine
frontendtooling
Type d'issue
bug
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
3
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
1-3 hours
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
stale
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
clear
Prérequis
ESLintReactasync/await
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
45
Direction de recherche
Investigate the rule implementation in src/rules/no did mount set state.js. Determine if the rule's logic should distinguish synchronous setState calls in componentDidMount from asynchronous ones where setState is called after an await. Review the discussion comments for proposed solutions and consider adding an option to allow async patterns. The fix may involve modifying the rule to only warn on synchronous setState calls.