根据选中/未选中的复选框将obejct推送到状态变量数组

Question

在我的react应用程序中，我必须将一个对象传递到api端点，如下所示：

{
"name": "string",
"description": "string",
"permissions": [
{
"name": "string",
"value": "string",
"groupName": "string",
"description": "string"
}
]
}

有两个文本字段(用于名称和描述(和一个复选框(用于权限(。如果我选中了复选框，对象必须被推入权限数组，如果我取消选中复选框数组应该为空。我该怎么做？请帮忙。这是我的代码块：

import React, { useState, useEffect, Component } from 'react';
import TextField from '@material-ui/core/TextField';
import { Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel, Grid, makeStyles } from '@material-ui/core';
import Button from '@material-ui/core/Button';

export default class Index extends Component {
state = {
roleData: {
name: '',
description: '',
permissions: []
},
viewUser: false
}
handleSubmit = () => {
console.log(this.state.roleData);
}
handleViewUser = () => {
if (this.state.viewUser) {
this.state.roleData.permissions = [
{ data: 'abc' }
]
}
else {
this.state.roleData.permissions = [
{ data: 'xyz' },
{ newData: 'pqr' }
]
}
}
render() {
return (
<>
<TextField
name={this.state.roleData.name}
value={this.state.roleData.name}
onChange={e => { this.setState({ roleData: { ...this.state.roleData, name: e.target.value } }); }}
/>
<TextField
style={{ marginTop: '20px' }}
name={this.state.roleData.description}
value={this.state.roleData.description}
onChange={e => { this.setState({ roleData: { ...this.state.roleData, description: e.target.value } }); }}
/>
<FormControlLabel
control={<Checkbox
checked={this.state.viewUser}
onChange={e => { this.setState({ viewUser: e.target.checked }) }}
onClick={this.handleViewUser}
/>}
label="View User" />
<Button variant="contained" color="primary" style={{ marginTop: '20px' }} onClick={this.handleSubmit} > Submit </Button>
</>
)
}
}

Answer 1

有两件事需要了解

• setState
• 在数组中推送一个项/值

在这里，您可以找到如何在react中设置状态https://reactjs.org/docs/faq-state.html

不能通过=在数组中添加值。您需要将一个项目推送到数组中。(参考：https://www.w3schools.com/jsref/jsref_push.asp)

要回答您的问题，您可以尝试以下代码。

handleViewUser = () => {
const permissions = this.state.viewUser
? [{ data: "abc" }]
: [{ data: "xyz" }, { newData: "pqr" }];
this.setState((prevState) => ({
...prevState,
permissions
}));