Как вставить элементы в массив?

Question

В пользовательском интерфейсе у меня установлены флажки для конкретной операции.

<input type="checkbox" className="form-check-input" name="Dashboard" 
   value="Read" onChange={this.get_permission.bind(this)}/>
<input type="checkbox" className="form-check-input" name="Dashboard" 
  value="Create" onChange={this.get_permission.bind(this)}/>
<input type="checkbox" className="form-check-input" name="Dashboard" 
 value="Update" onChange={this.get_permission.bind(this)}/><input 
 type="checkbox" className="form-check-input" name="Dashboard" 
value="Delete" onChange={this.get_permission.bind(this)}/>

Функция OnChange:

get_permission(event){
    var permissions = this.state.permissions
    if(event.target.checked){
        permissions.push({
            "module_name": event.target.name,
            "permissions": [event.target.value]
        })
    }
    else{
        for(var i=0;i<permissions.length;i++){
            if(permissions[i].module_name == event.target.name){
                if(permissions[i].permissions == event.target.value){
                    permissions.splice(i,1)
                    break
                }
            }
        }
    }
    console.log('permissions',permissions)
    this.setState({permissions : permissions})
}

Из вышеприведенного кода я могу отправить в прикрепленном ниже формате

Но мне нужно передать в следующем формате

Answer 1

Извините, у меня недостаточно репутации, чтобы комментировать.Но я думаю, что вы должны оптимизировать свою государственную структуру ниже.Вы используете разрешения так много раз в структуре.Это просто вводит в заблуждение.

{
    modules: [{
        moduleName: "Dashboard",
        permissions: {
            read: false,
            create: false,
            update: false,
            delete: false
        },
    }]
}

Кроме того, я бы посоветовал вам отображать флажки и таблицу вместо реакции, а не жестко кодировать элементы, а также конвертировать ваши функции в формат es6.Вы можете значительно упростить свой код, и это может даже привести к повышению производительности и лучшему пониманию кода.

Answer 2

Когда разрешение уже существует, вы должны обновить разрешения для этого.ваш код этого не делает

Обновите ваш код до

function get_permission(event) {
    const permissions = this.state.permissions.splice(); //If ES6 use [...this.state.permissions]
    const permission = permissions.find(item => item.module_name === permission);

    if (event.target.checked) {
        if (permission) {
            permission.permissions.push(event.target.value);
        } else {
            permissions.push({
                "module_name": event.target.name,
                "permissions": [event.target.value]
            })
        }
    }
    else {
        for (let i = 0; i < permission.permissions.length; i++) {
            if (permission.permissions[i] === event.target.value) {
                permission.permissions.splice(i, 1);
                break;
            }
        }
    }
    console.log('permissions', permissions);
}