コールバックで2番目のsetStateを作成する - 悪い習慣ですか？

Question

私は最初のsetState（）でコールバックとして2番目のsetState（）を作成しています。この貧しい練習ですか？ 2つのsetStatesを同期して呼び出す別の方法はありますか？

最初は、最初のsetState（）でupdateData（）を呼び出したときに、myComponentコンポーネントの正しいデータをレンダリングするのに遅延がありました。それは背後にある一歩だった。これは機能しますが、それは従来のものですか？

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

問題は、あなたがthis.state.textからdataを更新していることのようです。代わりに、元の入力値を参照することにより、単一の呼び出しで両方textとdataを更新することができます。

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

これは確かに（2回コンポーネント再レンダリング潜在的意味）setStateには、2つの呼び出しを行う上で好ましいです。