反应：状态不实时渲染

Question

I am trying to build a web app that calculates how much money one should save per day for a future travel (I know it could easily be done by a simple calculator but this is for the sake of learning).

My issue is that when I type a cost and time left in the two inputs the daily savings calculation does not render in real time on the DOM .

Here is what happens:

1. I type a cost in the first input (within Cost component) and the days left in the second input (within TimeLeft component)
2. The DOM renders both the cost and the days left in real time as I type (in {this.state.totalCost} and {this.state.timeLeft}
3. The calculations result {this.state.dailyCost} renders with a "one change" delay (ie Cost = 100, days left = 10. I need to type something else like adding a 0 in the cost for 10 to render in the DOM as a correct result of the calculation.)

Thank you for your help! I hope I explained in an understandable way.

My code:

    class App extends Component {
  constructor() {
    super();
    this.state = {
      totalCost: 0,
      timeLeft: 0,
      dailyCost: 0,
    }
  }

  updateDailySavings() {
    if (this.state.timeLeft !== 0) {
      this.setState({dailyCost: (this.state.totalCost / this.state.timeLeft).toFixed(2)});
    } else {
      this.setState({dailyCost: 0});
    }
  }

  changeCost(newCost) {
    this.setState({totalCost: Math.round(newCost)});
    this.updateDailySavings()
  }

  changeTimeLeft(newTimeLeft) {
    this.setState({timeLeft: Math.round(newTimeLeft)});
    this.updateDailySavings()
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <Cost changeCost={this.changeCost.bind(this)}/>
        <TimeLeft changeTimeLeft={this.changeTimeLeft.bind(this)}/> <br/>
        <div>You have to save £{this.state.totalCost} in the next {this.state.timeLeft} days.<br/>
        You have to save £{this.state.dailyCost} per day.
        </div>
      </div>
    );
  }
}

Answer 1

Your onChange handler functions should be

changeCost(newCost) {
    this.setState({totalCost: Math.round(newCost)},
                  this.updateDailySavings);
  }

  changeTimeLeft(newTimeLeft) {
    this.setState({timeLeft: Math.round(newTimeLeft)},
                  this.updateDailySavings);
  }

From the docs ,

setState() does not always immediately update the component. It may batch or defer the update until later. This makes reading this.state right after calling setState() a potential pitfall. Instead, use componentDidUpdate or a setState callback (setState(updater, callback)), either of which are guaranteed to fire after the update has been applied.

Since you want to use the updated state in your next setState call , you should use the callback.

EDIT: corrected the code after removing the extra () as pointed out by @bennygenel

Answer 2

Calculation does not render in real time on the DOM.

a) setState is asynchronous , subsequent calls in the same update cycle will overwrite previous updates, and the previous changes will be lost.

so if you want to use this.setState values you should use a callback function.

this.setState({value: 'value'},() => {return : /*something here ..*/});

Instead of mutating state ( this.state.someValue )directly its a good practice to return a fresh copy of state .

return { ...previousState, value: updated new state };

You can read more Here

Answer 3

As pointed out by @bennygenel, setState is async, so you should do:

updateDailySavings() {
    if (this.timeLeft !== 0) {
      this.setState({dailyCost: (this.totalCost / this.timeLeft).toFixed(2)});
    } else {
      this.setState({dailyCost: 0});
    }
  }

  changeCost(newCost) {
    this.totalCost = Math.round(newCost);
    this.setState({totalCost: this.totalCost});
    this.updateDailySavings()
  }

  changeTimeLeft(newTimeLeft) {
    this.timeLeft = Math.round(newTimeLeft);
    this.setState({timeLeft: this.timeLeft});
    this.updateDailySavings()
  }

*Note maybe the two later setStates are not needed anymore, but I don't know if you are using them after or not

Answer 4

for me I used async await and work pretty nice

async updateDailySavings() {
    if (this.state.timeLeft !== 0) {
      await this.setState({dailyCost: (this.state.totalCost / this.state.timeLeft).toFixed(2)});
    } else {
      await this.setState({dailyCost: 0});
    }
  }

  async changeCost(newCost) {
    await this.setState({totalCost: Math.round(newCost)});
    this.updateDailySavings()
  }

  async changeTimeLeft(newTimeLeft) {
    await this.setState({timeLeft: Math.round(newTimeLeft)});
    this.updateDailySavings()
  }

I hope it can help you