콜백에서 두 번째 setState 만들기 - 나쁜 습관?

Question

저는 첫 번째 setState()에서 두 번째 setState()를 콜백으로 사용하는 구성 요소를 사용합니다. 이 가난한 관행인가? 두 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), 
    }); 
} 

이 확실히 (배의 구성 요소를 다시 쓰게 잠재적 의미) setState 두 호출을 선호한다.