切换以单独显示

Question

我想单独切换列表。。应该如何进行？

.map((item) => {
return (
<>
<StyledTableRow key={item.medName}>
<button onClick={() => setToggle(!toggle)}>
<StyledTableCell component="th" scope="row">
{item.medName}
</StyledTableCell></button>
{toggle && <StyledTableCell align="center" >
{item.saltName}
</StyledTableCell>
</StyledTableRow>
</>

Answer 1

与其为每个元素存储一个布尔状态值，不如存储一个id或其他可以独立设置/检查的唯一属性。

示例：

const [toggled, setToggled] = React.useState({});
const toggleHandler = id => {
setToggled(ids => ({
...ids,
[id]: !ids[id], // <-- toggle specific element by key
}));
};
...
.map((item) => {
return (
<>
<StyledTableRow key={item.medName}>
<button onClick={() => toggleHandler(ite.medName)}> // <-- pass property
<StyledTableCell component="th" scope="row">
{item.medName}
</StyledTableCell>
</button>
{toggle[item.medName] && ( // <-- check property
<StyledTableCell align="center">
{item.saltName}
</StyledTableCell>
)}
</StyledTableRow>
</>
);
})