反应 useState 不更新状态

Question

我有一个带有复选框的表格，我想将选中的复选框的 ID 保存在状态中。这是我的代码。

输入看起来像这样（我使用 coreui，所以这是表的 scopedSlots 的内部）：

selected: (item) => {
 return (
  <td style={{ width: '40px' }}>
   <CInputCheckbox
     className="mx-auto"
     id={item.id}
     onChange={(e) => handleSelect(e)}
   />
  </td>
);}

剩下的就这些了：

const [selectedRows, setSelectedRows] = useState([]);

const handleSelect = (e) => {
  const id = e.target.id;
  const index = selectedRows.indexOf(id);
  const rows = [...selectedRows];
  if (index === -1) {
    rows.push(id);
  } else {
    rows.split(index, 1);
  }
  setSelectedRows(rows);
};

最奇怪的事情发生了 - 在 chrome 的 react devtools 中，我看到第一个 id 被添加到 selectedRows 数组中，然后当我选择另一行时 - 数组中的前一项被覆盖。当我 console.log 我的 selectedRows 数组时，它总是显示空数组（即使我在 devtools 中看到有一个项目）。我不知道我在这里做错了什么。

Answer 1

在你的问题中没有很多信息可以使用，所以我不得不对它们应该如何工作做出许多假设，但这是我到目前为止得到的：

• handleSelect 函数在从列表中删除项目时有一点错误，您的函数正在使用拆分，但我认为您的意思是切片

• 我认为 handleSelect 和 const [selectedRows, setSelectedRows] = useState([]); 的范围是错误的。据我所见，它们与 selected 组件处于同一级别，这将失败，因为它们当时只能跟踪一个选定的组件，我认为您需要跟踪多个选定组件。

这是我认为您正在尝试做的工作版本

https://codepen.io/richard-unal/pen/eYWXXOo?editors=1111

如果您需要澄清某些事情，请告诉我，我知道我不是最好的解释者。