React函数组件中useState无法修改对象数组状态的问题

一、TypeScript类型定义修复 #

你的类型错误源于useState泛型指定错误：你声明的是单个ITestInterface对象或undefined，但实际传入的是该类型的数组，导致类型不兼容。

修正代码 #

interface ITestInterface extends IListOption {
    privilege: number | null;
}

export interface IListOption {
    id: string;
    text: string;
    value: boolean;
    disabled?: boolean;
}

// 泛型改为数组类型
const [arrayOfObjects, setArrayOfObjects] = useState<ITestInterface[]>(
    objects.map(object => ({
        id: `${object.type}`,
        value: false,
        text: object.name,
        privilege: object.privilege,
        disabled: false
    }))
);

如果需要允许数组为空或undefined，可将泛型改为ITestInterface[] | undefined，但初始化时传入的是有效数组，因此直接用ITestInterface[]更合理。

二、状态无法更新的解决方法 #

1. 使用函数式更新避免闭包问题 #

如果在异步操作、回调中更新状态，直接依赖当前arrayOfObjects会因闭包捕获旧值导致更新无效，必须用函数式更新：

// 清空数组
setArrayOfObjects(() => []);

// 过滤数组
setArrayOfObjects(prevArray => prevArray.filter(item => item.privilege !== 12345678));

2. 缓存初始化状态避免重复重置 #

如果objects在每次组件渲染时都会生成新数组，会导致状态被反复初始化。用useMemo缓存初始化值：

const initialArray = useMemo(() => 
    objects.map(object => ({
        id: `${object.type}`,
        value: false,
        text: object.name,
        privilege: object.privilege,
        disabled: false
    })), 
    [objects] // 仅当objects变化时重新生成数组
);

const [arrayOfObjects, setArrayOfObjects] = useState<ITestInterface[]>(initialArray);

3. 修正useEffect依赖项 #

用useEffect执行清空操作时，不要依赖arrayOfObjects（会触发无限循环），应依赖触发清空的条件变量：

useEffect(() => {
    if (yourCondition) {
        setArrayOfObjects([]);
    }
}, [yourCondition]); // 仅当条件变量变化时执行

4. 检查组件挂载状态 #

确认组件没有因条件渲染（如{show && <YourComponent />}）被卸载后重新挂载，否则状态会重新初始化，表现为更新无效。

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