0

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

应用程序.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;

密码沙盒

4

2 回答 2

0

所以你的代码是完整的。没有问题。这就是 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 如何工作的详细示例：

常量 [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;
});
}

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

于 2021-06-15T09:08:35.507 回答
0

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

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;```
于 2021-06-19T02:35:06.603 回答