Faire un second setState en rappel - mauvaise pratique?

Question

J'ai un composant où je fais un second setState() comme callback dans le premier setState(). Est-ce une mauvaise pratique? Existe-t-il une autre façon d'appeler deux setStates de manière synchrone?

Initialement, lorsque j'ai appelé updateData() dans le premier setState(), il y avait un retard dans le rendu des données correctes dans le composant myComponent. C'était un "pas" derrière. Cela fonctionne, mais est-ce conventionnel?

import React, { Component } from "react"; 
import MyComponent from "../../components/MyComponent"; 
import RaisedButton from "material-ui/RaisedButton"; 
import { generateData } from "./generateData"; 

class App extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     text: "", 
     data: [] 
    }; 
    } 

    updateData(){ 
    this.setState({ 
     data: generateData(this.state.text) 
    }) 
    } 

    handleChange(e) { 
    this.setState({ 
     text: e.target.value 
    },() => { 
     this.updateData(this.state.text) 
    }); 
    } 

    handleSubmit(e) { 
    e.preventDefault(); 
    } 

    render() { 
    return (
     <div> 
     <h2>Input</h2> 
     <form onSubmit={e => this.handleSubmit(e)}> 
      <textarea 
      value={this.state.text} 
      onChange={e => this.handleChange(e)} 
      /> 
      <div> 
      <RaisedButton type="submit"/> 
      </div> 
     </form> 
     <h2>Output</h2> 
     <MyComponent data={this.state.data} /> 
     </div> 
    ); 
    } 
} 

export default App; 

Answer 1

Le problème semble être que vous mettez à jour data de this.state.text. Au lieu de cela, vous pouvez mettre à jour à la fois text et data en un seul appel en faisant référence à la valeur d'entrée d'origine:

handleChange(e) { 
    this.setState({ 
    text: e.target.value, 
    data: generateData(e.target.value), 
    }); 
} 

Cela est certainement préféré faire sur deux appels à setState (ce qui implique potentiellement rerender le composant deux fois).