react-data-table-component：访问所选行并将其分配给 setState答案

【问题标题】：react-data-table-component: access the selected row and assign it to setStatereact-data-table-component：访问所选行并将其分配给 setState
【发布时间】：2021-06-15 08:53:42
【问题描述】：

嗨，我真的是 react 新手，所以我有一个包含一堆数据的表，我想将选定行的值分配给我的 setState，但输出看起来不像我预期的那样，我制作了一个更简单的代码版本，就在这里。

App.js：

import React from "react";
import DataTable from "react-data-table-component";

const app = () => {
  const [selectedData, setSelectedData] = React.useState();

  const data = [
    { name: "Jade", age: "25" },
    { name: "Brian", age: "15" }
  ];

  const columns = [
    {
      name: "Name",
      selector: "name"
    },
    {
      name: "Age",
      selector: "age"
    }
  ];

  const handleChange = (state) => {
    setSelectedData(state.selectedRows);
    console.log(selectedData);
  };

  return (
    <div>
      <DataTable
        data={data}
        columns={columns}
        selectableRows
        onSelectedRowsChange={handleChange}
      />
    </div>
  );
};

export default app;

Codesandbox

【问题讨论】：

标签： javascript reactjs react-data-table-component

【解决方案1】：

所以你的代码是完整的。没有问题。这就是 React 的功能。 React 中的任何状态更改都是批处理的。因此，在您设置了状态之后，您的 setState 方法不会立即更新状态变量中的状态。相反，它等待 setState 周围的同步范围完成。只有在那之后，您的状态变量才有更新的值。

  return (
    <div>
      <DataTable
        data={data}
        columns={columns}
        selectableRows
        onSelectedRowsChange={handleChange}
      />
     <div>{selectedData[0] ? selectedData[0].name : ''}</div>
    </div>

如果您添加我在此处添加的行，您将看到您的 selectedData 确实使用所选值更新。但是如果您尝试通过调用 setSelectedData 在您设置 selectedData 的同步范围内访问 selectedData ，您将永远不会看到当前选择的数据。此外，如果您想进一步试验，请尝试一次又一次地更改您的选择，您将看到 console.log(selectedData); 行将显示先前选择的值。这是对在同步范围内进行的所有状态更新进行批处理并在控件到达范围末尾时进行所有状态更改的响应属性。

此外，如果您确实想显示您选择的数据，最好使用 event.selectedRows 而不是 selectedData。

setstate 工作原理的详细示例：

const [someState, setSomeState] = useState(0);

//假设我们在某个事件上调用这个函数

const eventHandler = () => {
//line 1 setSomeState(someState + 1);
//line 2 setSomeState(someState + 1);
//line 3 setSomeState(someState + 1);
}

现在第 3 行之后 someState 的值是多少。它将是 1。为什么？第一行取 someState 的值为 '0' 并将其加 1，尝试将值设置为 1 的新状态。但是当我们转到第 2 行时，我们再次尝试访问 someState 并且我们期望 someState由 line1 更新，这不会发生。 someState 的值仍然是 0。为什么？因为 react 等待整个块首先完成，然后才真正更新状态。这是 React 内部的一种优化技术。此外，如果您想查看之前设置的状态，也有一种解决方法。

const eventHandler = () => {
setSomeState(someState + 1);
setSomeState((prevState) => {
 return prevState + 1;
});
setSomeState((prevState) => {
 return prevState + 1;
});
}

现在这将更新每一行的状态。

【讨论】：

嗨，感谢您的回答，但似乎复选框失去了它的功能，所以当我尝试删除第一行时，它会继续添加我选择的行，即使我已经选择了它并且尝试删除它，当我删除 handleChange 函数上的 setState 时，它工作得很好，你能详细说明一下吗？谢谢！
when i tried to remove the first row it keeps adding the row i selected even though i'm already select it and try to remove it. 这正是 setstate 的行为。检查我下面的评论。让我试着更好地解释一下。
您好，非常感谢您的帮助，感谢您对我的支持，我正在努力理解您的解释，但似乎我无法理解，我试过了你上面的方法，但它仍然给我同样的问题，我不知道我是否做对了，你能检查一下吗？这是我的代码：const handleChange = (state) => { setSelectedData(state.selectedRows); setSelectedData((prevData) => { return prevData; }); };

【解决方案2】：

通过将数据变量移动到全局范围解决了这个问题，这是因为数据变量不断在组件内重新渲染

import DataTable from "react-data-table-component";

  const data = [
    { name: "Jade", age: "25" },
    { name: "Brian", age: "15" }
  ];

const app = () => {
  const [selectedData, setSelectedData] = React.useState();

  const columns = [
    {
      name: "Name",
      selector: "name"
    },
    {
      name: "Age",
      selector: "age"
    }
  ];

  const handleChange = (state) => {
    setSelectedData(state.selectedRows);
    console.log(selectedData);
  };

  return (
    <div>
      <DataTable
        data={data}
        columns={columns}
        selectableRows
        onSelectedRowsChange={handleChange}
      />
    </div>
  );
};

export default app;```

【讨论】：