问题描述
我正在使用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设置为selectedID
,selectedRow
查找行值并传递到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>