ReactJS中循环设置数组对象状态仅生效单个的问题求解

你在循环里每次调用setData("permissions", [{name:temp[i],isChecked:false}])时，都是直接将permissions状态替换为仅包含当前循环项的新数组。由于React状态更新是批量合并的，前面的更新会被后续的覆盖，最终只会保留最后一次循环设置的对象。

方法1：预构建完整数组后一次性更新 #

先遍历生成完整的权限对象数组，再调用一次setData完成状态更新，避免多次覆盖：

const setUncheckPermissions = () => {
    const temp = props.permissions.map((permission) => permission.name);

    if(props.permissions.length > role.permissions.length){
        // 一次性构建所有需要的权限对象数组
        const newPermissions = temp.map(name => ({ name, isChecked: false }));
        setData("permissions", newPermissions);
        console.log('all good')
    } else {
        console.log('Maybe problems happen')
    }
}

方法2：函数式状态更新（适合基于现有状态追加） #

如果需要在已有permissions数组基础上添加元素，要用函数式更新，确保获取到最新的状态值：

const setUncheckPermissions = () => {
    const temp = props.permissions.map((permission) => permission.name);

    if(props.permissions.length > role.permissions.length){
        for(let i=0; i < temp.length; i++){
            // 用函数式更新，基于之前的状态追加新元素
            setData("permissions", prevPermissions => [...prevPermissions, {name:temp[i],isChecked:false}]);
        }
        console.log('all good')
    } else {
        console.log('Maybe problems happen')
    }
}

注：方法2仅在需要保留原有数组元素时使用，你的场景更适合方法1，效率更高。

• 状态更新原子性：React会批量合并多次状态更新操作，同一状态的连续更新只会保留最后一次的结果。
• 函数式状态更新：当状态更新依赖于当前状态时，必须使用函数形式的更新参数，确保拿到最新的状态快照，避免因异步更新导致的状态不一致。

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