Javascript React Material UI表-同时切换所有切换

我在我的应用程序中添加了一个react mat ui表，并在其中一列中添加了开关，但由于某些原因，它们都在一起切换，而不是单独切换

我怎样才能改变这个

{operators.map（（行）=>(
{row.operator}
关

和演示：

知道哪里出了问题吗？
您可以使用状态数组来保持每个原始数据的状态：

import React, {useState} from "react";
import { withStyles } from "@material-ui/core/styles";
import { purple } from "@material-ui/core/colors";
import FormGroup from "@material-ui/core/FormGroup";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Switch from "@material-ui/core/Switch";
import Grid from "@material-ui/core/Grid";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import Typography from '@material-ui/core/Typography';
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";
import { makeStyles, withStyles } from "@material-ui/core/styles";


const AntSwitch = withStyles(theme => ({
  root: {
    width: 28,
    height: 16,
    padding: 0,
    display: "flex"
  },
  switchBase: {
    padding: 2,
    color: theme.palette.grey[500],
    "&$checked": {
      transform: "translateX(12px)",
      color: theme.palette.common.white,
      "& + $track": {
        opacity: 1,
        backgroundColor: theme.palette.primary.main,
        borderColor: theme.palette.primary.main
      }
    }
  },
  thumb: {
    width: 12,
    height: 12,
    boxShadow: "none"
  },
  track: {
    border: `1px solid ${theme.palette.grey[500]}`,
    borderRadius: 16 / 2,
    opacity: 1,
    backgroundColor: theme.palette.common.white
  },
  checked: {}
}))(Switch);

const tableStyles = makeStyles({
  table: {
    minWidth: 150
  }
});

export default function CustomizedSwitches() {
  const [gridData, setGridData] = useState([
    { key: 6, operator: "OyPohjolanLiikenne Ab", checked: false },
    { key: 12, operator: "Helsingin Bussiliikenne Oy", checked: true },
    { key: 17, operator: "Tammelundin Liikenne Oy", checked: false },
    { key: 18, operator: "Pohjolan Kaupunkiliikenne Oy", checked: true },
    { key: 20, operator: "Bus Travel Åbergin Linja Oy", checked: false },
    { key: 21, operator: "Bus Travel Oy Reissu Ruoti", checked: true }
  ]);

  const handleChange = (event, index) => {
    gridData[index].checked = event.target.checked;
    setGridData([...gridData]);
  };

  const tableClasses = tableStyles();


  return (
    <TableContainer component={Paper}>
      <Table
        stickyHeader
        className={tableClasses.table}
        size="small"
        aria-label="a dense table"
      >
        <TableHead>
          <TableRow>
            <TableCell>Operator</TableCell>
            {/* <TableCell align="right">Listed</TableCell> */}
            <TableCell>Visible</TableCell>
            <TableCell align="right">Total Placements</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {gridData.map( (row, index) => (
            <TableRow key={row.key}>
              <TableCell component="th" scope="row">
                {row.operator}
              </TableCell>
              <TableCell>
                <Typography component="div">
                  <Grid
                    component="label"
                    container
                    alignItems="center"
                    // justify="flex-end"
                    spacing={1}
                  >
                    <Grid item>Off</Grid>
                    <Grid item>
                      <AntSwitch
                        checked={row.checked}
                        onChange={(event) => handleChange(event, index)}
                        name="checkedC"
                      />
                    </Grid>
                    <Grid item>On</Grid>
                  </Grid>
                </Typography>
              </TableCell>
              <TableCell align="right">{"<<Placement value>>"}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

import React，{useState}来自“React”；
从“@material ui/core/styles”导入{withStyles}”；
从“@material ui/core/colors”导入{purple}”；
从“@material ui/core/FormGroup”导入FormGroup；
从“@material ui/core/FormControlLabel”导入FormControlLabel；
从“@material ui/core/Switch”导入开关；
从“@material ui/core/Grid”导入网格；
从“@物料界面/核心/表格”导入表格；
从“@material ui/core/TableBody”导入表体；
从“@material ui/core/TableCell”导入TableCell；
从“@material ui/core/TableContainer”导入TableContainer；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/TableHead”导入表头；
从“@material ui/core/TableRow”导入TableRow；
从“@material ui/core/Paper”导入纸张；
从“@material ui/core/styles”导入{makeStyles，withStyles}”；
const AntSwitch=withStyles（主题=>({
根目录：{
宽度：28，
身高：16，
填充：0，
显示：“flex”
},
开关库：{
填充：2，
颜色：主题。调色板。灰色[500]，
“&$checked”：{
转换：“translateX（12px）”，
颜色：theme.palette.common.white，
“&+$track”：{
不透明度：1，
背景色：theme.palete.primary.main，
边框颜色：theme.palete.primary.main
}
}
},
拇指：{
宽度：12，
身高：12，
boxShadow：“无”
},
轨道：{
边框：`1px solid${theme.palete.grey[500]}`，
边界半径：16/2，
不透明度：1，
背景色：theme.palette.common.white
},
选中：{}
}))（开关）；
const tableStyles=makeStyles({
表:{
最小宽度：150
}
});
导出默认函数CustomizedSwitchs（）{
const[gridData，setGridData]=useState([
{键：6，运算符：“OyPohjolanLiikenne Ab”，选中：false}，
{键：12，接线员：“Helsingin Bussiliikenne Oy”，勾选：true}，
{键：17，操作员：“Tammelundin Liikenne Oy”，勾选：false}，
{键：18，接线员：“Pohjolan Kaupunkilikenne Oy”，勾选：true}，
{键：20，接线员：“巴士旅行奥贝金·林加Oy”，勾选：假}，
{键：21，接线员：“巴士旅行Oy Reissu Ruoti”，勾选：真}
]);
常量handleChange=（事件、索引）=>{
gridData[index].checked=event.target.checked；
setGridData（[…gridData]）；
};
const tableClasses=tableStyles（）；
返回(
操作人员
{/*已列出*/}
看得见的
总安置
{gridData.map（（行，索引）=>(
{row.operator}
关
handleChange（事件、索引）}
name=“checkedC”
/>
在…上
{""}
))}
);
}
gridData[index].checked=event.target.checked；
是一种状态突变，最好使用函数更新来浅层复制现有状态并更新元素匹配索引，即
const{checked}=event.target；setGridData（gridData=>gridData.map（（item，i=>i==index？{…item，checked}:item））
。已相应地进行了调整。多亏了这两者。