如何使用 reactjs 中的循环设置数组中对象的状态答案

【问题标题】：How to set a state with object in array using loop in reactjs如何使用 reactjs 中的循环设置数组中对象的状态
【发布时间】：2022-12-11 23:24:58
【问题描述】：

我在项目中使用循环设置数组中对象的状态时遇到问题。当我只循环其中的数据集时。

这是我的代码

    const {role} = usePage().props
const { data, setData, put, processing, errors, reset } = useForm({
    name: role.name || '',
    permissions: []

})

const setUncheckPermissions = () => {
    const temp = props.permissions.map((permission) => {
        return permission['name']
    })

    if(props.permissions.length > role.permissions.length){
        for(let i=0; i < temp.length; i++){
            setData("permissions", [{name:temp[i],isChecked:false}]); // only set one of them 
        }

        return console.log('all good')
    }

    return console.log('Maybe problems happen')

}

请给我一些线索或提示或更好的术语来解决这个问题。先感谢您

【问题讨论】：

标签： reactjs

【解决方案1】：

setData("permissions", temp.map(it => ({name: it, isChecked: false})))

【讨论】：

我明白了，我需要在里面循环，thx brother

【解决方案2】：

您似乎将属性 isChecked: false 映射到每个权限对象

为此，您只需要使用地图函数一次，然后为整个权限设置状态。

无需映射一次以取出 name 属性并循环遍历它以设置 isChecked 属性。一切都可以一次完成。此外，在循环中调用 setData 将使您的组件在每次迭代时重新呈现，这是不希望的。

只需这样做：

const setUncheckPermissions = () => {
    if(props.permissions.length > role.permissions.length){
        const uncheckedPermissions = props.permissions.map((permission) => {
            return {name: permission.name, isChecked: false};
        })
        setData("permissions", uncheckedPermissions);
    }
}

【讨论】：

谢谢大哥的指点，这个方法也好看