Javascript 为什么history.push不能与单击按钮一起工作？它根本就不能让我前进

我的问题是历史推送不起作用。点击按钮后它就不会转发我了？你怎么解决这个问题？或者我的思维错误是什么？如果我也为转发设置了一个状态，它也不会工作。有人知道如何利用历史来做到这一点吗

const LoginPage: React.FC<Props> = (props: Props) => {
    const [email, setEmail] = React.useState("");
    const [password, setPassword] = React.useState("");

    const history = useHistory();

    const handleEmailChange = (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
        const newEmail = event.target.value
        setEmail(newEmail)
    }

    const handlePasswordChange = (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
        const newPassword = event.target.value
        setPassword(newPassword)
    }

    const { isAuthenticated } = React.useContext(TokenContext);

    const loginClick = () => {
        axios.post('/api/users/auth', {
            email: email,
            password: password
        }).then(res => {
            history.push("/dashboard")
            localStorage.setItem("jwt-token", res.data.token);
        })
    }

    return (
        <React.Fragment>
            {isAuthenticated ? <Redirect to="/dashboard" /> :
                <TextField
                     label="Email Address"
                     name="email"
                     onChange={handleEmailChange}
                   />
                   <TextField
                     name="password"
                     label="Password"
                     type="password"
                     onChange={handlePasswordChange}
                    />
                    <Button
                      onClick={() => loginClick()}
                      variant="contained"
                      style={{ color: "white", backgroundColor: COLORS.primary }}
                      >
                    Anmelden
                   </Button>
            }
        </React.Fragment >
    )
}

const LoginPage:React.FC=（道具：道具）=>{
const[email，setEmail]=React.useState（“”）；
const[password，setPassword]=React.useState（“”）；
const history=useHistory（）；
constHandleeMailChange=（事件：React.ChangeEvent）=>{
const newEmail=event.target.value
设置电子邮件（新电子邮件）
}
const handlePasswordChange=（事件：React.ChangeEvent）=>{
const newPassword=event.target.value
设置密码（新密码）
}
const{isAuthenticated}=React.useContext（TokenContext）；
const loginClick=（）=>{
axios.post（“/api/users/auth”{
电邮:电邮,，
密码：密码
})。然后（res=>{
history.push（“/dashboard”）
setItem（“jwt令牌”，res.data.token）；
})
}
返回(
{是否已验证？：
loginClick（）}
variant=“包含”
样式={color:“白色”，背景色：COLORS.primary}
>
户口
}
)
}

您的loginClick函数是一个异步函数，这意味着您必须等待axios函数解析，返回服务器响应，然后对数据进行处理

你可以这样写：

const loginClick = async() => {
        await axios.post('/api/users/auth', {
            email: email,
            password: password
        }).then(res => {
            history.push("/dashboard")
            localStorage.setItem("jwt-token", res.data.token);
        })
    }

甚至更好

const loginClick = async() => {
    let res = await axios.post('/api/users/auth', {
        email: email,
        password: password
    }).then(data => {
        return data;
    })
    .catch((error)=> {
      console.log(error);
    });
    history.push("/dashboard");
    localStorage.setItem("jwt-token", res.data.token);

---

}

不幸的是，我无法准确地说出问题所在。然而，这里有一些东西将有助于将其刷新到公开状态：您能否在发送POST请求之前记录一些内容（如

console.log（'before request'）

），然后在调用

history.push之前记录一些不同的内容？这将让我们看到（1）是否调用此方法，以及（2）是否调用对
的回调。