React+Redux场景下useState点击两次才更新状态的问题求助

我是一名Java开发者，近期开始接触ReactJs，目前还是新手。正在使用Redux和React Hooks开发演示项目，尝试用react-collapsed包创建可折叠嵌套组件时遇到问题：组件能正常渲染品牌列表，但点击品牌项时，series提示undefined。调试发现首次点击时useState并未更新series，第二次点击才会用之前选中的项更新series，请问如何能立即获取变更后的series值？

组件代码如下：

import useCollapse from "react-collapsed";
import {useEffect, useState} from "react";
import {useDispatch, useSelector} from "react-redux";
import {changeBrand} from "../../redux/actions/brandActions";
import initialState from "../../redux/reducers/initialState";

export const Collapsible = props => {

    const {brands} = props;
    const currentBrand = useSelector(state => state.changeBrandReducer);

    const [series, setSeries] = useState(initialState.currentSeri);
    const dispatch = useDispatch();

    const {getCollapseProps, getToggleProps, isExpanded} = useCollapse();

    const selectBrand = brand => {
        dispatch(changeBrand(brand));
        showSeries();
    }

    useEffect(() => {
        setSeries(currentBrand.series);
        console.log("Current brand : " + currentBrand.name);
    }, [currentBrand]);

    const showSeries = () => {
        return (
            console.log(series)
            // <div>
            //     {
            //         series.map(seri => (
            //             <div {...getCollapseProps()} key={seri.id}>
            //                 <div className="content" key={seri.id}>{seri.name}</div>
            //             </div>
            //         ))
            //     }
            // </div>
        );
    }

    return (
        <div>
            {brands.map(brand => (
                <div className="collapsible" key={brand.id}>
                    <div className="header" {...getToggleProps()} key={brand.id}
                         onClick={() => selectBrand(brand)}>
                        {brand.name}
                    </div>
                </div>
            ))}
        </div>
    )
} 

问题根源 #

1. Redux的dispatch是异步更新状态的，调用dispatch(changeBrand(brand))后立刻执行showSeries()时，Redux中的currentBrand还没完成更新，useEffect里的setSeries也未触发，所以series还是旧值。
2. 没必要用本地useState存储series，直接依赖Redux中的currentBrand.series即可，多一层状态同步反而容易导致数据不一致。

修改步骤 #

1. 移除本地series状态：删除const [series, setSeries] = useState(initialState.currentSeri);和对应的useEffect同步逻辑。
2. 直接使用Redux中的数据：渲染系列的逻辑直接基于currentBrand.series，不再依赖本地state。
3. 简化点击逻辑：点击品牌后仅需dispatch更新Redux状态，组件会自动根据新的currentBrand重新渲染，无需手动调用渲染函数。

修改后的完整代码 #

import useCollapse from "react-collapsed";
import {useDispatch, useSelector} from "react-redux";
import {changeBrand} from "../../redux/actions/brandActions";

export const Collapsible = props => {
    const {brands} = props;
    const currentBrand = useSelector(state => state.changeBrandReducer);
    const dispatch = useDispatch();
    const {getCollapseProps, getToggleProps, isExpanded} = useCollapse();

    const selectBrand = brand => {
        dispatch(changeBrand(brand));
    }

    const renderSeries = () => {
        // 先判断数据是否存在，避免undefined报错
        if (!currentBrand?.series) return null;
        
        return (
            <div>
                {currentBrand.series.map(seri => (
                    <div {...getCollapseProps()} key={seri.id}>
                        <div className="content">{seri.name}</div>
                    </div>
                ))}
            </div>
        );
    }

    return (
        <div>
            {brands.map(brand => (
                <div className="collapsible" key={brand.id}>
                    <div 
                        className="header" 
                        {...getToggleProps()} 
                        onClick={() => selectBrand(brand)}
                    >
                        {brand.name}
                    </div>
                    {/* 用isExpanded控制系列的显示隐藏 */}
                    {isExpanded && renderSeries()}
                </div>
            ))}
        </div>
    )
} 

额外说明 #

• 增加!currentBrand?.series的可选链判断，避免初始状态或数据未加载时出现报错。
• 将原showSeries改名为renderSeries，更符合React渲染函数的命名习惯。
• 把系列渲染逻辑放在品牌容器内部，通过isExpanded控制显示，贴合可折叠组件的交互逻辑。

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