我正在寻找一个解决方案，它可以使用 prop 和用户令牌来创建一个动态对话框窗口，用于更改用户的Meta数据（如密码）。
当我在纵断面图中单击按钮时

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

字符串
它将changerequest设置为password，这样对话框就知道用户想要更改密码，并相应地呈现Dialog窗口。

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;

型
到目前为止，一切都很好，除了从恢复函数，因为它会下降错误“无法读取未定义的属性（阅读'电子邮件'）”我想这个错误发生，因为我没有正确传递令牌，我已经尝试过：

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

型
结果是函数提前停止了一个示例，错误说：“Cannot read properties of undefined（阅读'user'）”在其他页面上，我这样做了，它工作得很好：

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

型
Token是在用户登录App.js时设置的：

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

型
Login.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(...)}

型
但我猜是因为功能的原因，这把斧头是不同的。很想得到一个答案，提前谢谢！