setOpen 不会影响 table 中的特定行

Question

每当我单击 IconButton 时，所有行都会展开，而实际上我只希望它展开我单击它的特定行。伙计们，这里有什么问题？

这是我的代码：

const [open, setOpen] = React.useState(false);

<TableBody>
      {drugs.map((drug) => (
        <>
    <TableRow key={drug._id}>
        <TableCell>
      <IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
        {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
      </IconButton>
    </TableCell>
          <TableCell>{drug.name}</TableCell>
          <TableCell align="right">{drug.class}</TableCell>
          <TableCell align="right">{drug.suggestedDoseAdult}</TableCell>
          <TableCell align="right">{drug.suggestedDosePediatric}</TableCell>
          <TableCell align="right">{drug.administered}</TableCell>
        </TableRow>
        <TableRow>
    <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
      <TableRow>
      <Collapse in={open} timeout="auto" unmountOnExit>
        <Box margin={1}>
          <Typography variant="h7" gutterBottom component="div">
            {drug.description}
          </Typography>
        </Box>
      </Collapse>
      </TableRow>
    </TableCell>
  </TableRow>
  </>
      ))}
    </TableBody>

Answer 1

您可以在您的状态下存储打开的 ID，而不是使用布尔值：

const [open, setOpen] = React.useState(null);

const handleSelect = (id) => {
  setOpen(currentId => {
    // if it's already opened then unselect it
    if (currentId === id) return null
    return id
  })
}

在您的 IconButton 上与 drug._id:

进行比较

<IconButton aria-label="expand row" size="small" onClick={() => handleSelect(drug._id)}>
  {open === drug._id ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
</IconButton>
...
<Collapse in={open === drug._id } timeout="auto" unmountOnExit>

setOpen 不会影响 table 中的特定行

setOpen doesnt affect a specific row in a table

reactjs

material-ui

react-functional-component