react-data-table-component：访问选定的行并将其分配给 setState

Question

嗨，我真的是 React 的新手，所以我有一个 table，其中包含一堆数据，我想将所选行的值分配给我的 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

Answer 1

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

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

如果您添加我在此处添加的行，您将看到您的 selectedData 确实更新了所选 value.But 如果您尝试在您设置的同步范围内访问 selectedData selectedData 通过调用setSelectedData，你永远不会看到当前选中的数据。此外，如果您想对此进行进一步试验，请尝试一次又一次地更改您的选择，您将看到行 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由第 1 行更新，这是不会发生的。 someState 的值仍然是 0.Why？因为 React 等待整个块首先完成，只有在那之后它才真正更新状态。这是 React 自身的一种优化技术。此外，如果您想查看之前设置的状态，也有一种解决方法。

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

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

Answer 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;```

react-data-table-component：访问选定的行并将其分配给 setState

react-data-table-component: access the selected row and assign it to setState

javascript

reactjs

react-data-table-component