如何在一个JS函数中使用props和用户令牌？

问：

我正在寻找一种解决方案，可以使用道具和用户令牌来创建动态对话框窗口来更改用户元数据（例如密码）。

当我单击剖面图中的按钮时

<ChangeRequestDialog changerequest="Password"></ChangeRequestDialog>

它将 changerequest 设置为 password，以便对话框知道用户想要更改密码，并相应地呈现对话框窗口。

export default function ChangeRequestDialog(props, token){
  const [open, setOpen] = React.useState(false);
  
  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };
const handleChange = (event) => {
    setModel(event.target.value);
  };
const pwrecovery = async (e) => {
    let { data, error } = await supabase.auth.resetPasswordForEmail(
      token.user.email
    );
    console.log('pw recovery done')
  };

return (
<React.Fragment>
<Button className="button" variant="contained" onClick={handleClickOpen}>
                      change password
                    </Button>
<Dialog open={open} onClose={handleClose}>
        <DialogTitle>change {props.changerequest}</DialogTitle>
        <DialogContent>
          <DialogContentText>
{ props.changerequest=='Password'
                      ? "Are you sure you want to change you password?"
: ""
                  }
</DialogContentText>
 <DialogActions>
          <Button onClick={handleClose}>Cancel</Button>
          {
                     props.changerequest=='Password'
                      ? <Button onClick={pwrecovery}>Change</Button>
                      : ""
                  }
        </DialogActions>
</Dialog>
    </React.Fragment>

我正在将令牌从 App.js 传递到 ChangeRequestDialog.js，如下所示：

function App() {
  const [token, setToken] = useState(false);

  if (token) {
    sessionStorage.setItem("token", JSON.stringify(token));
  }

  useEffect(() => {
    if (sessionStorage.getItem("token")) {
      let data = JSON.parse(sessionStorage.getItem("token"));
      setToken(data);
    }
  }, []);
return (
<BrowserRouter>
<Routes>
<Route path="/profile" element={<Profile token={token} />} />
<Route path="/ChangeRequestDialog" element={<ChangeRequestDialog token={token} />} />
</Routes>
</BrowserRouter>
  );
}

export default App;

到目前为止，除了 pwrecovery 函数之外，一切都很好，因为它删除了错误“无法读取未定义的属性（读取'电子邮件'）” 我想发生此错误是因为我没有正确传递令牌 我已经尝试过：

export default function ChangeRequestDialog(props, {token}){

结果是该函数提前停止了一个实例，并且错误显示：“无法读取未定义的属性（读取'user'）” 在其他页面上，我是这样做的，它工作得很好：

const Profile = ({ token }) => {
};
export default Profile;

令牌是在用户登录时设置的 App.js：

<Route path="/login" element={<Login setToken={setToken} />} />

登录.jsx：

const Login=({setToken}) =>{
...
async function handleSubmit(e){
    e.preventDefault()

    try{
      const {data, error} = await supabase.auth.signInWithPassword(
        {
          email: formData.email,
          password: formData.password,
        }
        )

      if (error) throw error
      console.log(data)
      setToken(data)
      navigate('/profile')
    }
      catch(error){
        alert(error)
      }
}
return(...)}

但我想由于功能的原因，synthax 是不同的。很想得到答案，提前谢谢！