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

Question

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

当我单击个人资料视图中的按钮时

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

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

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}){

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

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

Token在用户登录时设置 应用程序.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(...)}

但我想由于合成器的功能不同。希望得到答复，提前谢谢！

Answer 1

您传递道具的方式是不正确的，您现在的反应方式会解释第一个参数（道具），因为道具对象和令牌将是未定义的 有 2 种方法可以修复它

1. 使用 props.token

export default function ChangeRequestDialog(props){
 const token = props.token;
...
}

2. 原地解构

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