在这个 React Pomodoro Clock 中，有一个函数被称为sessionIncrement()尝试将 state 中的一个值更新为秒，然后立即通过转换再次更新它。但是，转换没有任何效果，这似乎是因为状态的异步性质。任何帮助将不胜感激。索引.html<!DOCTYPE html><html dir="ltr"><head> <meta charset="utf-8"> <title>25-5 Clock</title> <style> </style></head><body> <main> <div id="app"></app> </main> <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script> </body> </html>
1 回答
慕桂英4014372
TA贡献1871条经验 获得超13个赞
通常我们试图通过在一个 setState 函数中更新状态来避免多次状态调用。根据我的经验，我遇到了用当前状态更新我的状态的问题。（即不要使用this.state，尽量使用prevState）
/* We could use code like the following to update specific properties */
this.setState({ key1: newValue1, key3: newValue3 });
你的代码
sessionIncrement() {
// same as decrement except does increment
const toSeconds = () => {
let sessionSeconds = this.state.sessionLength * 60;
this.setState({ sessionSeconds: sessionSeconds }, () => console.log(this.state.sessionSeconds));
this.setState({ timeLeft: sessionSeconds});
}
// Convert to MM:SS
const secondsToMins = (time) => {
let converted = Math.floor(time / 60) + ':' + ('0' + Math.floor(time % 60)).slice(-2);
return converted;
}
let time = this.state.sessionSeconds;
let sessionLength = this.state.sessionLength + 1;
this.setState({ sessionLength: sessionLength }, toSeconds);
this.setState({ timeLeft: secondsToMins(time) }, () => console.log(this.state.timeLeft));
}
不确定你为什么要更新 timeLeft 两次，所以我选择用你更新它的最后一个值来更新 timeLeft。
使用一个 setState：
this.setState(prevState => ({
sessionLength: prevState.sessionLength+1,
sessionSeconds: (prevState.sessionLength+1)*60,
timeLeft: secondsToMins((prevState.sessionLength+1)*60)}), callbackFunction
);
有关如何使用状态的更多信息，请参阅文档。
希望将所有状态更新嵌套到一个 setState 中将解决 setState 的问题，并且它是异步的。
您还可以添加更多回调。
this.setState({}, func1, func2, func3);
or
this.setState({}, () => {func1, func2, func3});
添加回答
举报
0/150
提交
取消