在useMemo钩子内部的react路由器链接中使用时,状态未定义

问题描述

我正在使用React Router导航到另一个页面,并使用useMemo内部的状态将状态传递给该页面

 const columns = React.useMemo(
    () => [
      {
        Header: "Actions",id: "actions",Cell: (tableProps) => {
          return (
            <>
               <Link
                to={{
                  pathname: "list-table/list-table-edit",state: { selectedRow },}}
              > 
              <span
                style={{
                  cursor: "pointer",color: "grey",textdecoration: "underline",}}
                onClick={(event) => {
                  
                  setSelectedID(tableProps.row.original.asset_ID);
                }}
              >
                <Tooltip title="Edit Row">
                  <EditButton aria-label="edit">
                    <CreateIcon fontSize="small" />
                  </EditButton>
                </Tooltip>
              </span>
               </Link> 
            </>
          );
        },},...MakeTableColumns,],[selectedRow]
  );

我的状态被这样声明

  const [selectedID,setSelectedID] = useState();
  const selectedRow = oriData.find((row) => row.asset_ID === selectedID);

用户单击Edit时,它将行ID设置为selectedIDselectedRow查找行值并传递到list-table-edit页。 但是,当我从props.location.state进行console.log list-table-edit时,显示的是undefined。当我在<Link> .. 之外取出useMemo并提供一个状态ID时,它工作正常,我认为useMemo出问题了。 如果有人可以提供帮助,我将非常感谢,谢谢

已更新

现在,我从state: { selectedRow }更改为state: { tableProps.row.original }并传递到另一个页面,它在不传递状态的情况下也可以工作。我本可以通过调用tableProps.row.original获得选定的行值。

解决方法

<Link to={{ pathname: '/list-table/list-table-edit',state: { record: selectedRow} }}>My route</Link>