React.JS 상태 값이 두 개 있습니다.

Question

두 입력에서 연산을 수행하려고합니다. 먼저 상태를 업데이트 한 다음 새로 업데이트 된 상태로 두 개의 값을 추가합니다.

<input type="number" onChange={this.handleIncomeChange.bind(this)} value={this.state.income} /> 

이 코드

가 작동하지 않습니다 :

handleIncomeChange(e) { 
    this.setState({income: e.target.value}); 
    this.state.resultMonth = +this.state.income - +this.state.expense; 
} 

이 코드가 작동 (결과는 항상 하나 개의 번호 뒤에이다) : I 반응의 개념을 이해하면 확실하지

handleIncomeChange(e) { 
    const income = e.target.value; 
    this.state.resultMonth = +income - +this.state.expense; 
    this.setState({income: e.target.value}); 
} 

. JS 상태. 첫 번째 코드가 작동하지 않는 이유를 확실히 이해하지 못합니다.

Answer 1

this.state =을 사용하여 상태를 직접 수정하면 안됩니다 (상태 초기화 중에는 제외). setState API를 사용하여 모든 주 수정을하십시오. 예를 들어

:

handleIncomeChange(e) { 
    const newIncome = e.target.value; 
    this.setState({ 
    income: newIncome, 
    resultMonth: newIncome - this.state.expense 
    }); 
} 

---

업데이트 : 아래의 의견에 OP에 의해 기술 codepen과 문제에 따라.

재사용 문제를 해결하기 위해 다음과 같이 할 수 있습니다.

handleDataChange(income, expense) { 
    this.setState({ 
    income: income, 
    expense: expense, 
    resultMonth: income - expense 
    }); 
} 

handleIncomeChange(e) { 
    const newIncome = e.target.value; 
    this.handleDataChange(newIncome, this.state.expense); 
} 

handleExpenseChange(e) { 
    const newExpense = e.target.value; 
    this.handleDataChange(this.state.income, newExpense); 
}