在 React js 中管理各个行的状态 table

Question

我有一个要求，对于 table 的每一行（行是动态填充的），我有一个 'Details' 按钮，它应该在点击时弹出一个模式。我如何为这个 table 的每一行维护一个状态，以便 React 知道我正在单击哪一行，从而将道具相应地传递给模态组件？

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

这是我目前尝试过的方法：

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

我从 DB 得到 'data'。在函数 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;
  })
}

在 React js 中管理各个行的状态 table

Managing state of individual rows in react js table

reactjs

react-hooks

use-state