通过引用使用状态

Question

使用 mui-material，我正在使用这条线折叠表格行

<Collapse in={"open"+row.name} timeout="auto" unmountOnExit>

我有一个使用状态

const [openOne, setOpenOne] = useState(false)

在.map迭代期间，第一个 row.name 将是One ，因此在 collpase 中它会创建为in={openOne}

我的问题是如何将{"open"+row.name}引用为{openOne}到 useState openOne ？

Answer 1

您应该使用不同的方法。

也许不是为每个项目使用不同的useState ，您应该使用一个保存所有项目的值的 useState。

const [openRows, setOpenRows] = useState(()=>{
   // replace allRows with the list of rows you have
   allRows.reduce((acc, {name})=>({
     ...acc,
     [name]: false
   }),{});
});

现在你可以使用

<Collapse in={openRows[row.name]} timeout="auto" unmountOnExit>

并设置一行，你可以做

setOpenRows((currentOpen) => ({
  ...currentOpen,
  'one': true  // or [row.name]: true if you are using it in a dynamic way
}));