reactjs 按引用使用状态

insrf1ej  于 2022-12-26  发布在  React
关注(0)|答案(1)|浏览(138)

使用multi-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

wgeznvg7

wgeznvg71#

您应该使用不同的方法。
也许您不应该对每个项使用不同的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
}));

相关问题