迭代对象数组以创建多个 UI 开关

问题描述

• 我正在使用 React.js、打字稿和 Material UI。

• 我持有两个布尔值，checkedA: false，checkedB: false。

• 注意它们是硬编码的，我想让它们动态化。基本上，我有对象数组（权限列表），它们将作为道具传递给这个组件。我想迭代/映射它们，使用它们的名称（从 props 对象数组中获取），并用它们的名称替换“checkedA”和“checkedB”。

• 原因是，props 对象数组（权限列表）可能会更改，并且有 3 或 10 个对象。所以我希望能够将它们全部列出并有一个开关功能，可以选择打开/关闭该权限。

• 请询问您是否需要更多说明。基本上是，如何映射一组对象，同时让每个对象都有一个单独的和功能性的 UIswitch。

        export const PermissionList: React.FC<PermissionListProps> = props => {
            const classes = useStyles();
            const [state,setState] = React.useState({
                checkedA: false,checkedB: false,});
  
  
  
            const handleSwitchChange = (e:any) => {
                console.log(e.target.checked)
                setState({ ...state,[e.target.name]: e.target.checked });
            };
  
  
            return (
                <Container>
                    <Card>
                        <TableContainer className={classes.scroll} component={Paper}>
                            <Table aria-label="simple table">
                                <TableHead>
                                <TableRow>
                                    <TableCell className={classes.name} align="left">Permission Name</TableCell>
                                    <TableCell className={classes.description} align="left">Permission Description</TableCell>
                                    <TableCell align="left">Switch</TableCell>
                                </TableRow>
                                </TableHead>
                                <TableBody>
                                {props.data_permissions.map(p => (
                                    <TableRow key={p.name}>
                                        <TableCell className={classes.name}>{p.name}</TableCell>
                                        <TableCell className={classes.description}>{p.description}</TableCell>
                                        <TableCell>
                                        <FormGroup row className={classes.Permission}>
                                            <FormControlLabel
                                                control={<Switch checked={state.checkedA} onChange={handleSwitchChange} name="checkedA" />}
                                                label="Off/On"
                                                />
                                            </FormGroup>
                                            <FormControlLabel
                                                control={<Switch checked={state.checkedB} onChange={handleSwitchChange} name="checkedA" />}
                                                label="Off/On"
                                                />
                                            </FormGroup>
                                        </TableCell>
                                    </TableRow>
                                ))}
                                </TableBody>
                            </Table>
                        </TableContainer>
                    </Card>
                </Container>
            )
        };
  

以下是将通过的 props/ 对象数组的示例：

        const data_permissions = [
            {
            "name": "Outreach","description": "Configure Aspen's outbound dialer,Configure Aspen's outbound dialer,Configure Aspen's outbound dialer","permission_name": "outreach"
            },{
            "name": "Softphone","description": "Access the Amazon Connect Softphone","permission_name": "softphone"
            },{
            "name": "Metrics and Quality","description": "Access Metrics and Quality","permission_name": "metrics-quality"
            },{
            "name": "Cost Accounting","description": "Access Cost Accounting","permission_name": "cost-accounting"
            },{
            "name": "Embedded CRM","description": "Access the Embedded CRM","permission_name": "embedded-application"
            },{
            "name": "Admin Settings","description": "Modify users,roles and feature settings across the organization.","permission_name": "admin-access"
            }
        ];

解决方法

我认为您需要为数组中的所有对象创建一个包含 CheckedA 和 CheckedB 值的对象，并将其存储在状态中。像这样：{Outreach: {CheckedA: true,CheckedB: false},Softphone: {CheckedA: true,CheckedB: false} ... }

你可以试试下面的代码。我无法运行和测试它。所以如果有任何错误，请告诉我。

      export const PermissionList: React.FC<PermissionListProps> = props => {
          const classes = useStyles();
          const [state,setState] = React.useState({});



          const handleSwitchChange = (e:any,pname:any) => {
              console.log(e.target.checked)
              setState({ ...state,pname: {[e.target.name]: e.target.checked }});
          };


          return (
              <Container>
                  <Card>
                      <TableContainer className={classes.scroll} component={Paper}>
                          <Table aria-label="simple table">
                              <TableHead>
                              <TableRow>
                                  <TableCell className={classes.name} align="left">Permission Name</TableCell>
                                  <TableCell className={classes.description} align="left">Permission Description</TableCell>
                                  <TableCell align="left">Switch</TableCell>
                              </TableRow>
                              </TableHead>
                              <TableBody>
                              {props.data_permissions.map(p => (
                                  <TableRow key={p.name}>
                                      <TableCell className={classes.name}>{p.name}</TableCell>
                                      <TableCell className={classes.description}>{p.description}</TableCell>
                                      <TableCell>
                                      <FormGroup row className={classes.Permission}>
                                          <FormControlLabel
                                              control={<Switch checked={state[p.name].checkedA} onChange={(e) => handleSwitchChange(e,p.name)} name="checkedA" />}
                                              label="Off/On"
                                              />
                                          </FormGroup>
                                          <FormControlLabel
                                              control={<Switch checked={state[p.name].checkedB} onChange={(e) => handleSwitchChange(e,p.name)} name="checkedB"/>}
                                              label="Off/On"
                                              />
                                          </FormGroup>
                                      </TableCell>
                                  </TableRow>
                              ))}
                              </TableBody>
                          </Table>
                      </TableContainer>
                  </Card>
              </Container>
          )
      };