这篇文章是我的第一篇文章!
我正在 React 中创建一个番茄钟。我的目标很简单。我正在创建一个 Pomodoro 时钟,能够在 JavaScript 中成功完成此操作,但使用 React 组件架构。但我遇到了一些问题。
所以我的 App 组件有 3 个子组件:Session
、Timer
和 Break
应用组件
let [fromSession, setFromSession] = useState();
let [isSession, setIsSession] = useState();
let [fromBreak, setFromBreak] = useState();
let [isBreak, setIsBreak] = useState();
const fromSessionFunction = w => {
setFromSession(w);
}
const sessionTrueOrNot = x => {
setIsSession(x);
}
const fromBreakFunction = y => {
setFromBreak(y);
}
const breakTrueOrNot = z => {
setIsBreak(z);
}
if(isBreak === true) {
isSession = false;
}
if (isSession === true) {
isBreak = false;
}
console.log('from App', isSession, isBreak)
return (
<div className='app-background center'>
<h1>Pomodoro Timer</h1>
<div className='flex'>
<Session sessionFunctionFromApp={fromSessionFunction} sessionTrueOrNot={sessionTrueOrNot}/>
<Timer sessionFromApp={fromSession} isSessionFromApp={isSession} breakFromApp={fromBreak} isBreakFromApp={isBreak}/>
<Break breakFunctionFromApp={fromBreakFunction} breakTrueOrNot={breakTrueOrNot}/>
</div>
</div>
)
}
export default App;
session 组件
let [sessionTime, setSessionTime] = useState(25);
let [sessionTrue, setSessionTrue] = useState();
const decreaseSessionFunction = () => {
setSessionTime(sessionTime -= 1);
setSessionTrue(true);
}
const increaseSessionFunction = () => {
setSessionTime(sessionTime += 1);
setSessionTrue(true);
console.log(sessionTrue);
}
useEffect(() => {
setSessionTrue(true);
}, []);
sessionFunctionFromApp(sessionTime);
sessionTrueOrNot(sessionTrue);
return (
<div>
<h3>Session</h3>
<p>{sessionTime}:00</p>
<button className='ui purple basic button' onClick={() => decreaseSessionFunction()}>-</button>
<button className='ui purple basic button' onClick={() => increaseSessionFunction()}>+</button>
</div>
)
}
export default Session;
计时器组件
let name, display;
if(isSessionFromApp) {
name = 'Timer for Session';
display = sessionFromApp;
}
if(isBreakFromApp) {
name = 'Timer for Break';
display = breakFromApp;
}
return (
<div>
<h2>{name}</h2>
<p id='big-font'>{display}:00</p>
<button className='ui blue basic button'>Start</button>
<button className='ui blue basic button'>Stop</button>
<button className='ui blue basic button'>Restart</button>
</div>
)
}
export default Timer;
中断组件
let [breakTime, setBreakTime] = useState(10);
let [breakTrue, setBreakTrue] = useState();
const decreaseBreakFunction = () => {
setBreakTime(breakTime -= 1);
setBreakTrue(true);
}
const increaseBreakFunction = () => {
setBreakTime(breakTime += 1);
setBreakTrue(true);
console.log(breakTrue);
}
useEffect(() => {
setBreakTrue(false)
}, []);
breakFunctionFromApp(breakTime);
breakTrueOrNot(breakTrue);
return (
<div>
<h3>Break</h3>
<p>{breakTime}:00</p>
<button className='ui violet basic button' onClick={() => decreaseBreakFunction()}>-</button>
<button className='ui violet basic button' onClick={() => increaseBreakFunction()}>+</button>
</div>
)
}
export default Break;
好吧,从字面上看,我唯一想做的就是,从应用程序中,当我像现在这样console.log
时,它会打印true
或false
这很好。
我希望 Session
默认为真,Break
默认为假。 所以我想要的是当我点击 +
的 Break,尽管 App 的 console.log
更改为 false true。从 Break 组件的第 15 行说 false。
为什么会这样?
如果这是假的,那么应用程序怎么会说假真呢?
最后,当我点击 Session 的 +
时,Session 组件的第 15 行再次显示 true,但 App 打印 false true。
感谢您的阅读,我真诚地感谢您的帮助,我理解我的代码反射(reflect)了我是一个初学者。
最佳答案
您看到 Break
和 App
对 看似 相同的值 breakTrue
说了一些矛盾的事情。但它们实际上是两个值。这是因为 setState()
是一个异步函数。您不能指望它会立即改变其状态。
En bref,你的代码执行顺序是这样的:
[PSEUDO CODE]
1. Break: setBreakTrue(true)
// issue an async update command, doesn't take effect yet.
2. Break: console.log(breakTrue)
// sync func, instant effect, so you see the old value `false` before previous command
3. App: console.log('from App', isBreak)
// exec in the re-render cycle triggered by 1st command, thus reflects the new value `true`.
我在这里附上一个demoboard .检查 Break
文件 ln:22,我添加了:
useEffect(() => console.log('breakTrue (async):', breakTrue))
这个 console.log
被包裹在 useEffect
中,因此它在 setState
命令完成它的工作后执行,所以您会看到 breakTrue
的新值如预期的那样为 true
。
附件是这个应用程序的重写:
https://frontarm.com/demoboard/?id=aa46b63b-a020-4041-b8a8-14c2174c647e
关于javascript - 尝试在 React 中创建一个番茄钟但坚持正确传递 Prop ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59463352/