修改useState值后按钮样式未重渲染的React问题求助

核心问题 #

你的代码存在两个关键问题，导致重复点击时按钮样式无法正常更新：

• 直接修改原状态数组：在updateActiveCurrencies中，你直接对activeCurrencies的引用进行操作（如push），React依赖状态的引用变化触发重渲染，直接修改原数组不会改变引用，React会认为状态未变更，因此不会重新计算按钮的className。
• useState类型定义错误：初始状态定义为<[]>，会让TypeScript推断activeCurrencies是永远为空的数组，这会导致后续状态更新时的类型异常，也可能间接影响状态更新的触发逻辑。

另外，你尝试使用useEffect时出现的Rendered more hooks than during the previous render错误，是因为违反了React Hook规则——所有Hook必须在组件顶层作用域调用，不能嵌套在generateCurrencyButtons这类渲染过程中执行的子函数里。

修复后的代码 #

export default function MyPage(){
    // 修正类型定义，明确为字符串数组
    const [activeCurrencies, setActiveCurrencies] = useState<string[]>([]);

    const updateActiveCurrencies = (currency: string) => {
        // 使用函数式更新，基于最新的前一次状态计算新值
        setActiveCurrencies(prevState => {
            if (prevState.includes(currency)) {
                // 返回新数组，过滤掉目标元素
                return prevState.filter(c => c !== currency);
            } else {
                // 返回新数组，扩展原数组并添加新元素
                return [...prevState, currency];
            }
        });
    };

    const generateCurrencyButtons = () => {
        const currencies = ["EUR", "USD", "GBP"];

        return (
            <div>
                {currencies.map((currency: string) => (
                    <Button
                        key={currency}
                        variant="brandnavy"
                        size="sm"
                        className={
                            activeCurrencies.includes(currency)
                                ? "opacity-100"
                                : "opacity-50"
                        }
                        onClick={() => updateActiveCurrencies(currency)}
                    >
                        {currency}
                    </Button>
                ))}
            </div>
        );
    };

    return (
        <div>
            <PageHeader
                activeCurrencies={generateCurrencyButtons()}
            >
                ...
            </PageHeader> 
            <PageContent>
                ...
            </PageContent>
        </div>
    )
}

关键修复点 #

• 函数式状态更新：setActiveCurrencies(prevState => ...)确保每次更新都基于最新的状态值，避免闭包导致的状态过时问题。
• 返回新数组：无论是添加还是删除元素，都返回全新的数组（[...prevState, currency]或prevState.filter(...)），保证状态引用发生变化，触发React重渲染。
• 修正类型定义：将<[]>改为<string[]>，明确状态为字符串数组，解决类型推断错误。

关于useEffect的正确用法 #

如果需要监听activeCurrencies的变化，直接在组件顶层添加useEffect即可，不要放在子函数中：

useEffect(() => {
    // 处理activeCurrencies变化后的逻辑
    console.log("选中的货币更新：", activeCurrencies);
}, [activeCurrencies]);

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