React切换状态仅触发一次：如何实现每次点击均切换状态？

问题原因 #

代码里useCallback的依赖数组是空的，导致toggleDark函数始终捕获组件初始渲染时的dark值（true）。第一次点击时，setDark(!dark)会把状态设为false，但后续点击时，函数里的dark还是初始的true，所以每次调用都是设置false，状态不再切换。

解决方案 #

有两种可行的修复方式：

方式一：添加状态依赖到useCallback

把dark加入useCallback的依赖数组，这样每当dark状态变化时，toggleDark都会重新创建，捕获最新的状态值：

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

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

    const toggleDark = useCallback(() => {
        setDark(!dark)
    }, [dark]); // 添加dark作为依赖

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

方式二：使用函数式更新状态

调用setDark时传入一个函数，利用函数式更新获取上一次的状态值，这样不需要依赖dark，也能保证每次都基于最新状态切换：

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

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

    const toggleDark = useCallback(() => {
        setDark(prevDark => !prevDark) // 函数式更新，获取上一次状态
    }, []); // 依赖数组保持为空即可

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

推荐第二种方式，尤其是当你需要toggleDark保持稳定引用（比如传递给子组件避免不必要重渲染）时，函数式更新+空依赖数组的组合更合适。

内容的提问来源于stack exchange，提问作者vbulash