管理 React js 表中各个行的状态答案

【问题标题】：Managing state of individual rows in react js table管理 React js 表中各个行的状态
【发布时间】：2021-10-24 20:00:36
【问题描述】：

我有一个要求，对于表格的每一行（行是动态填充的），我有一个“详细信息”按钮，它应该在单击时弹出一个模式。如何为该表的每一行维护一个状态，以便 React 知道我正在单击哪一行，从而将 props 相应地传递给模态组件？

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

这是我迄今为止尝试过的：

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

我从数据库中获取“数据”。在函数 detailsShow 中，我试图以某种方式获取行的索引，以便我可以更新 'tableState' 中的相应状态此外，这是我放入模态组件的代码的样子，放置在行条目之后：

{tableState[index] && DetailModal}

这里的 DetailModal 是模态组件。非常感谢解决此用例的任何帮助！

【问题讨论】：

标签： reactjs react-hooks use-state

【解决方案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;
  })
}

【讨论】：