javascript - 尝试在 React 中创建一个番茄钟但坚持正确传递 Prop

Question

这篇文章是我的第一篇文章!

我正在 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)了我是一个初学者。

Answer 1

您看到 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