ReactJS: Avertissement: setState (…): impossible de mettre à jour lors d’une transition d’état existante

J’essaie de refactoriser le code suivant à partir de ma vue de rendu:

 

à une version où la liaison est dans le constructeur. La raison en est que la liaison dans la vue de rendu me posera des problèmes de performance, en particulier sur les téléphones portables bas de gamme.

J’ai créé le code suivant, mais je reçois constamment les erreurs suivantes (beaucoup d’entre elles). Il semble que l’application soit en boucle:

 Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`. 

Voici le code que j’utilise:

 var React = require('react'); var ButtonGroup = require('react-bootstrap/lib/ButtonGroup'); var Button = require('react-bootstrap/lib/Button'); var Form = require('react-bootstrap/lib/Form'); var FormGroup = require('react-bootstrap/lib/FormGroup'); var Well = require('react-bootstrap/lib/Well'); export default class Search extends React.Component { constructor() { super(); this.state = { singleJourney: false }; this.handleButtonChange = this.handleButtonChange.bind(this); } handleButtonChange(value) { this.setState({ singleJourney: value }); } render() { return ( 
); } } module.exports = Search;

    On dirait que vous appelez accidentellement la méthode handleButtonChange dans votre méthode de rendu, vous voulez probablement faire onClick={() => this.handleButtonChange(false)} place.

    Si vous ne voulez pas créer un lambda dans le gestionnaire onClick, je pense que vous aurez besoin de deux méthodes liées, une pour chaque paramètre.

    Dans le constructor :

     this.handleButtonChangeRetour = this.handleButtonChange.bind(this, true); this.handleButtonChangeSingle = this.handleButtonChange.bind(this, false); 

    Et dans la méthode de render :

       

    De réagir docs Passer des arguments aux gestionnaires d’événements

       

    Si vous essayez d’append des arguments à un gestionnaire dans recompose , assurez-vous de définir correctement vos arguments dans le gestionnaire. C’est essentiellement une fonction curry, donc vous voulez être sûr d’exiger le nombre correct d’arguments. Cette page présente un bon exemple d’utilisation d’arguments avec des gestionnaires.

    Exemple (depuis le lien):

     withHandlers({ handleClick: props => (value1, value2) => event => { console.log(event) alert(value1 + ' was clicked!') props.doSomething(value2) }, }) 

    pour votre enfant HOC et chez le parent

     class MyComponent extends Component { static propTypes = { handleClick: PropTypes.func, } render () { const {handleClick} = this.props return ( 
    ) } }

    cela évite d’écrire une fonction anonyme de votre gestionnaire pour corriger le problème en ne fournissant pas suffisamment de noms de parameters sur votre gestionnaire.

    J’ai eu la même erreur quand j’appelais

     this.handleClick = this.handleClick.bind(this); 

    dans mon constructeur quand handleClick n’existe pas

    (Je l’avais effacé et j’avais accidentellement laissé la déclaration “this” dans mon constructeur).

    Solution = supprimer la déclaration “this”.

    La solution que j’utilise pour ouvrir Popover pour les composants est reactstrap (composants React Bootstrap 4) .

      class Settings extends Component { constructor(props) { super(props); this.state = { popoversOpen: [] // array open popovers } } // toggle my popovers togglePopoverHelp = (selected) => (e) => { const index = this.state.popoversOpen.indexOf(selected); if (index < 0) { this.state.popoversOpen.push(selected); } else { this.state.popoversOpen.splice(index, 1); } this.setState({ popoversOpen: [...this.state.popoversOpen] }); } render() { 
    Header popover Description popover Header popover 2 Description popover2 } }

    Le problème est certainement celui de cette liaison lors du rendu du bouton avec le gestionnaire onClick. La solution consiste à utiliser la fonction flèche tout en appelant le gestionnaire d’action lors du rendu. Comme ceci: onClick={ () => this.handleButtonChange(false) }