React에 상태를 저장하는 것이 언제 안전합니까?

Question

폼에서 상태를 업데이트하는 반응 구성 요소가 있다고 가정 해 보겠습니다.

class Form extends React.Component { 
    constructor(props) { 
    super(props); 
    this.handleChange = this.handleChange.bind(this); 
    this.state = { 
     someCheckboxState: false, 
    } 
    } 
    render() { 
    return (
     <input onChange={this.handleChange} checked={this.state.someCheckboxState} /> 
    ); 
    } 
    handleChange(event) { 
    this.setState({ 
     someCheckboxState: event.target.checked, 
    }); 
    } 
} 

이제 상태를 서버 (또는 어딘가에)로 보내려고합니다. 난 그냥이

handleChange(event) { 
    this.setState({ 
    someCheckboxState: event.target.checked, 
    }); 
    SendStateToServer(JSON.stringify(this.state)); // BAD! Not yet mutated 
} 

를 할 경우 나는 render에 넣을 수 있지만, 초기뿐만 아니라 렌더링에 다음이뿐만 아니라 서버로 전송 얻을 것이다 상태를 render라는 함수를 보낼 바보 같다.

언제 상태를 유지/직렬화해도됩니까?

Answer 1

React의 setState의 두 번째 인수는 상태 전이가 완료된 후 시작되는 콜백입니다.

this.setState(newState,() => console.log(this.state)); 

따라서, 귀하의 경우 :

handleChange(event) { 
    this.setState({ 
    someCheckboxState: event.target.checked, 
    },() => { 
    SendStateToServer(JSON.stringify(this.state)); 
    }); 
} 

Answer 2

예, setState()second parameter, 완벽한 방법은 일을합니다.

class Form extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.handleChange = this.handleChange.bind(this); 
 
    this.state = { 
 
     someCheckboxState: false, 
 
    } 
 
    } 
 
    render() { 
 
    return (< input type = "checkbox" 
 
     onChange = { 
 
     this.handleChange 
 
     } 
 
     checked = { 
 
     this.state.someCheckboxState 
 
     } 
 
     /> 
 
    ); 
 
    } 
 
    handleChange(event) { 
 
    this.setState({ 
 
    someCheckboxState: event.target.checked, 
 
    },() => { // do your work 
 
     console.log(JSON.stringify(this.state)); 
 
    }); 
 
} 
 
} 
 

 
ReactDOM.render(< Form/> , document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>

상태 변화가 완료된 후 setState를위한