反应：状态不实时渲染

作者: 银环蛇
发布时间: 2024-12-19 12:27:41 (1月前)
转自：

4 条回复

0#
回复此人
别闹 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <BLOCKQUOTE> <P> 计算不会在DOM上实时呈现。 </p> </BLOCKQUOTE> <P> 一个） <code> setState </code> 是 <a href="https://medium.com/@wereHamster/beware-react-setstate-is-asynchronous-ce87ef1a9cf3" rel="nofollow noreferrer"> 异步 </A> ，在同一更新周期中的后续调用将覆盖以前的更新，之前的更改将丢失。 </p> <P> 所以如果你想使用 <code> this.setState </code> 您应该使用回调函数的值。 </p> <pre> <code> this.setState({value: 'value'},() => {return : /*something here ..*/}); </code> </pre> <P> 而不是改变状态（ <code> this.state.someValue </code> ）直接它是一个很好的做法，以返回一个新的国家副本。 </p> <pre> <code> return { ...previousState, value: updated new state }; </code> </pre> <P> 你可以阅读更多 <a href="https://medium.com/pro-react/a-brief-talk-about-immutability-and-react-s-helpers-70919ab8ae7c" rel="nofollow noreferrer"> 这里 </A> </p> </DIV>

编辑
1#
回复此人
哈哈 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 对我来说，我使用async等待并且工作得非常好 </p> <pre> <code> 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() } </code> </pre> <P> 我希望它可以帮到你 </p> </DIV>

编辑
2#
回复此人
一腔诗意喂了狗 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 正如@bennygenel所指出的，setState是异步的，所以你应该这样做： </p> <pre> <code> 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() } </code> </pre> <P> *注意可能不再需要两个以后的setStates，但我不知道你是否使用它们 </p> </DIV>

编辑

登录后才能参与评论