主页 / coding / 问题 / 77478963
Accepted
vbulash
Asked: 2023-11-14 15:53:54 +0800 CST

React 切换状态仅触发一次

  • 772

沙箱中的根标签App如下所示：

import React from 'react'
import { useState, useCallback } from 'react'

export default function App() {
    let [dark, setDark] = useState(true)

    const toggleDark = useCallback(() => {
        setDark(!dark)
    }, []);

    return (
        <main>
            <p onClick={toggleDark}>{dark ? 'dark mode' : 'light mode'}</p>
        </main>
    )
}

初始页面内容-“深色模式”。

按下它，更改为“灯光模式”。

再次按“灯光模式”-没有任何变化。似乎应用程序的状态只改变了一次。

如何在每次单击 <p> 时强制更改状态？

您可以在Replit 沙盒中查看完整示例

javascript

2 个回答

  1. Best Answer

    您需要将dark其添加为依赖项useCallback。否则，该函数将被缓存并始终假定 的dark初始值为true：

    const toggleDark = useCallback(() => {
        setDark(!dark)
    }, [dark]); // add dark as dependency here
    • 2

  2. 感谢@snaksa 的正确答案

    • 0

相关问题