管理react js表中单个行的状态

Question

我有一个要求，其中对于表的每一行(行是动态填充的)，我有一个"详细信息"按钮，它应该弹出一个模态单击。我如何维护该表的每一行的状态，以便React知道我正在单击哪一行，从而相应地将props传递给模态组件?

我尝试的是创建一个所有假值的数组，长度与我的数据相同。计划是在单击按钮时更新特定行的布尔值。但是，我无法执行相同的。

以下是我到目前为止所做的尝试:

let initTableState = new Array(data.length).fill(false)
const [tableState, setTableState] = useState(initTableState)
const detailsShow = (index) => {
setTableState(...tableState, tableState[index] = true)
}

我从DB得到'数据'。在函数detailsShow中，我试图获取行索引，这样我就能更新tableState中对应的状态此外，这是我的代码放入模态组件看起来像，放置在行条目之后:

{tableState[index] && DetailModal}

这里DetailModal是模态组件。对于解决这个用例的任何帮助，我们都非常感激!

Answer 1

tableState为单个数组对象。您还将数组扩展到setTableState更新函数中，状态更新函数也只接受单个状态值参数或回调函数来更新状态。

可以使用函数式状态更新，将前一个状态映射到下一个状态，使用映射索引匹配和更新特定元素的布尔值。

const detailsShow = (index) => {
setTableState(tableState => tableState.map((el, i) => i === index ? true : el))
}

如果你不想映射之前的状态，更喜欢先浅拷贝数组，然后更新特定的索引:

const detailsShow = (index) => {
setTableState(tableState => {
const nextTableState = [...tableState];
nextTableState[index] = true;
return nextTableState;
})
}