React useState数组在子组件值递减时无法正常更新的问题

问题场景 #

开发了一个筛选（Refinement）子组件，向父组件传递选中的文件类型数据。父组件通过useState将数据存入数组：

• 增量操作（勾选复选框）时，数组值表现正常
• 递减操作（取消勾选）时，数组值出现异常

核心原因 #

子组件中直接修改了useState返回的数组引用，未通过状态更新函数触发React重渲染：

1. 增量时用push直接修改原数组，虽能临时改变值，但违反React状态不可变原则
2. 递减时用filter生成新数组，但未调用setFileTypeSelected更新状态，导致传递给父组件的仍是旧状态引用
3. React依赖状态更新函数追踪变化，直接修改状态不会触发组件重渲染，造成状态与UI不同步

修复方案 #

子组件（Refinement.jsx）修复 #

必须通过setFileTypeSelected更新状态，使用不可变方式修改数组：

import { Fragment, useState } from "react";

const Refinement = (props) => {
    const [fileTypeSelected, setFileTypeSelected] = useState([]);

    const CheckBoxHandler = (isChecked, content) => {
        let newSelected;
        let changingState;
        if (isChecked) {
            // 增量：创建新数组，避免修改原状态
            newSelected = [...fileTypeSelected, content];
            changingState = "Incremental";
        } else {
            // 递减：filter返回新数组，更新状态
            newSelected = fileTypeSelected.filter((c) => c !== content);
            changingState = "Decremental";
        }
        // 更新状态
        setFileTypeSelected(newSelected);
        // 传递更新后的状态给父组件
        props.onDataModified({
            SearchCompnent: props.RefineName,
            SearchItem: newSelected,
            SearchState: changingState
        });
    };

    return (
        <Fragment>
            <div className="w-full rounded-md overflow-hidden shadow-sm border">
                <div className="flex justify-between items-center px-4 py-1 bg-biscay-700 text-white border-b">
                    <span className="font-semibold">{props.RefineName}</span>
                </div>
                <div className={`px-4 py-2 w-full flex flex-col gap-2 transform transition-all duration-200 ${props.RefineValue.length <= 5 ? "" : "h-36 overflow-y-scroll scrollbar"}`}>
                    {props.RefineValue.map(m => (
                        <div className="text-sm flex justify-between items-center" key={m.id}>
                            <span>{m.displayName}</span>
                            <input
                                className="accent-sky-500 w-4 h-4 rounded-md"
                                onChange={(event) => CheckBoxHandler(event.target.checked, m.displayName)}
                                type="checkbox"
                                // 补充：绑定checked状态，保持UI与状态同步
                                checked={fileTypeSelected.includes(m.displayName)}
                            />
                        </div>
                    ))}
                </div>
            </div>
        </Fragment>
    );
};
export default Refinement;

父组件（App.jsx）优化 #

用map简化数组转换逻辑，替换冗余的for循环：

import { Fragment, useState } from "react";
import Refinement from "../components/Refinement";

const App = () => {
    const [fileFormatRefine, setfileFormatRefine] = useState([
        { id: 0, displayName: 'PDF' },
        { id: 1, displayName: 'DOCX' },
        { id: 2, displayName: 'PPTX' },
        { id: 3, displayName: 'XLSX' },
        { id: 4, displayName: 'TXT' },
        { id: 5, displayName: 'MP3' },
        { id: 6, displayName: 'MP4' },
        { id: 7, displayName: 'CS' },
    ]);

    const [filterFormatModifiedDate, setFilterFormatModifiedDate] = useState([]);

    const FileFormatModifiedEnvent = (enterdModifiedData) => {
        const { SearchCompnent, SearchItem } = enterdModifiedData;
        // 用map简化数组转换
        const FileFormatQueryTemp = SearchItem.map(item => [[SearchCompnent, item]]);
        setFilterFormatModifiedDate(FileFormatQueryTemp);
    };

    return (
        <Fragment>
            <div className="w-full lg:w-5/6 mx-auto flex gap-4 mt-16 px-4">
                <div className="w-1/4 col-start-1 hidden lg:flex">
                    <form className="flex flex-col gap-4 w-full" id="Form" onSubmit={(event) => event.preventDefault()}>
                        <Refinement
                            onDataModified={FileFormatModifiedEnvent}
                            MinToShow={3}
                            RefineValue={fileFormatRefine}
                            RefineName="File Format"
                        />
                        <button
                            className="h-8 text-white font-semibold text-sm rounded bg-red-600"
                            onClick={() => console.log(filterFormatModifiedDate.length)}
                        >
                            Show Array Length
                        </button>
                    </form>
                </div>

                <div className="lg:w-3/4 w-full flex flex-col gap-2">
                    <div className="w-full">
                        <h3 className="text-xs flex items-center font-semibold uppercase mb-2">
                            Filters
                            <span className="h-4 w-4 ml-2 text-xs flex items-center justify-center rounded bg-gray-200 text-black">
                                {filterFormatModifiedDate.length}
                            </span>
                        </h3>
                        <div>
                            {filterFormatModifiedDate.map(f => (
                                <p key={f[0][1]}>{f[0]}</p>
                            ))}
                        </div>
                    </div>
                </div>
            </div>
        </Fragment>
    );
};
export default App;

关键注意点 #

1. 状态不可变性：永远不要直接修改React状态对象/数组，必须通过返回新对象/数组的方式更新
2. 状态更新函数：必须调用setState系列函数触发重渲染，确保状态与UI同步
3. 复选框状态绑定：给input添加checked属性，确保UI显示与内部状态一致

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