通过点击行在另一个页面传递数据：显示数据为空

Question

我正在使用 MUI-Datatable。它已经可以转到下一页，但是历史页面中没有显示任何数据。我该如何解决这个问题？

正在将数据传递到另一个页面：

这里可以看到console

中的数据

  const handleRowClick = (rowData, rowMeta) => {
    navigate("/history", rowData[0]);
    console.log(rowData[0], "products");
  };

  const options = {
    filter: true,
    selectableRows: "none",
    responsive: "simple",
    onRowClick: handleRowClick,
  };

历史页面： state

中没有显示任何内容

const History = (props) => {
  const { state } = useLocation(); //document ID here
  console.log(state, "state");


  return (
    <div>
      
    </div>
  );
};

export default History;

App.js

   <Route
            path="/history"
            element={
              <PrivateRoute>
                <Layout>
                  <History />
                </Layout>
              </PrivateRoute>
            }
          />

我不知道这里有什么问题，因为每当我单击每行中存在的按钮 edit 时，我都可以将另一个数据传递到我的 edit-page。

Answer 1

navigate 函数最多接受两个参数，“to”目标和带有 state 和 replace 键的“options”对象。

useNavigate

declare function useNavigate(): NavigateFunction;

interface NavigateFunction {
  (
    to: To,
    options?: { replace?: boolean; state?: any } // <-- options object, state
  ): void;
  (delta: number): void;
}

将 rowData 数组元素移动到 state 键下的选项对象中。

示例：

navigate("/history", { state: { rowData: rowData[0] } });

在接收组件上使用 useLocation 挂钩来访问路由状态。

const { state } = useLocation();
const { rowData } = state || {};

通过点击行在另一个页面传递数据：显示数据为空

Passing data on another page by clicking the row: It shows that data is null

javascript

reactjs

material-ui

react-router-dom

mui-datatable