react-tabulator Table组件通过redux状态传递数据时抛出错误

Question

我在 ReactJS 中面临

react-tabulator

库的问题。当我尝试使用

ReactTabulator

组件并传递

data

道具值（我必须从 redux 存储中获取）时，组件会抛出错误（“MachineID”是只读的）[有关更多详细信息，请参阅 ScreenShot]。我也尝试过 TanStack 表组件，它工作得很好，所以我不确定我在这里做错了什么！

Redux 库：

"react-redux": "^9.1.0"
"redux": "^5.0.1"
"@reduxjs/toolkit": "^2.2.1"

我的代码：

import * as React from "react";

import { useSelector } from "react-redux";

import "react-tabulator/lib/styles.css"; // required styles
import "react-tabulator/lib/css/tabulator.min.css"; // theme
import { ReactTabulator } from "react-tabulator";
import { useEffect, useState } from "react";

const CostSheet = () => {
  // TRY ONE
  const { basic_costsheet } = useSelector((state) => state.qm.costsheet);

  // TRY TWO
  const [data, setData] = useState(basic_costsheet);

  // TRY THREE
  const mod_arr = basic_costsheet.map((e) => e);

  // TRY FOUR
  const mod_arr_two = [];
  basic_costsheet.forEach((element) => {
    mod_arr_two.push(element);
  });

  // TRY FIVE
  const cs_data = [
    {
      McID: 1,
      MachineID: "1",
      MachineName: "m1",
      MaxLength: 1020,
    },
    {
      McID: 2,
      MachineID: "2",
      MachineName: "m2",
      MaxLength: 1050,
    },
    {
      McID: 3,
      MachineID: "3",
      MachineName: "m3",
      MaxLength: 1050,
    },
    {
      McID: 4,
      MachineID: "41",
      MachineName: "m4",
      MaxLength: 1060,
    },
  ];

  const columns = [
    { title: "MachineID", field: "MachineID" },
    { title: "MachineName", field: "MachineName" },
    { title: "MaxLength", field: "MaxLength" },
  ];

  const options = {
    layout: "fitColumns",
    pagination: "local",
    paginationSize: 10,
    movableColumns: true,
    resizableRows: true,
    initialSort: [{ column: "MachineID", dir: "asc" }],
  };

  return (
    <div>
      <ReactTabulator
        columns={columns}
        data={basic_costsheet} // TRY FIVE works as i pass static data or set data directly in useState.
        options={options}
      />

      {/* Every variable/state/redux state gets printed perfectly so the data is loading (IF AVAILALBE). no issues on that front! */}
      <pre>{String(JSON.stringify(basic_costsheet))}</pre>
      <pre>{String(JSON.stringify(data))}</pre>
      <pre>{String(JSON.stringify(mod_arr))}</pre>
      <pre>{String(JSON.stringify(mod_arr_two))}</pre>
      <pre>{String(JSON.stringify(cs_data))}</pre>
    </div>[![enter image description here][1]][1]
  );
};

export default CostSheet;

Answer 1

问题似乎是

ReactTabulator

正在以某种方式改变

data

数组对象，并且当直接使用来自 Redux-Toolkit (RTK) 创建的存储的值时，这种情况会中断。这是因为 RTK 在底层使用 Immer.js 并强制选择状态为 只读。换句话说，这样你就不会因为状态突变而搬起石头砸自己的脚。

您可以简单地创建new数据对象引用，但不直接耦合到您的存储值。浅复制

basic_costsheet

数组 和 浅复制每个数组元素。

示例：

const { basic_costsheet } = useSelector((state) => state.qm.costsheet);

...

<ReactTabulator
  columns={columns}
  data={basic_costsheet.map(item => ({ ...item }))}
  options={options}
/>

const basic_costsheet = useSelector((state) => state.qm.costsheet
  .basic_costsheet
  .map(item => ({ ...item }))
);

...

<ReactTabulator
  columns={columns}
  data={basic_costsheet}
  options={options}
/>