javascript - 在发布请求时响应渲染响应页面
问题描述
我有一个名为“登录”的反应组件。
成功登录凭据后,后端将重定向到用户页面。
app.post(
"/Login",
passport.authenticate("local", {
failureRedirect: "/login",
failureFlash: true
}),
function(req, res) {
res.redirect("/User");
}
);
在浏览器页面中虽然没有变化。这是网络统计数据的图片:
在图片上,您可以看到第二个请求/User
已发出,但浏览器未加载新页面。
这是Login
组件:
import React, { Component } from "react";
import { Redirect } from "react-router-dom";
import NavBar from "../components/styled/NavBar";
import { UserInput, Label, SubmitButt } from "../components/styled/Forms";
import styled from "styled-components";
const FormWrapper = styled.div`
padding: 10px;
border-radius: 5px;
background-color: #f2f2f2;
`;
const Form = styled.form``;
class Login extends Component {
constructor(props) {
super(props);
this.state = {
username: "",
password: ""
};
}
submitForm = async e => {
e.preventDefault();
const res = await fetch("/login", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
username: this.state.username,
password: this.state.password
})
});
};
onChange = e => {
this.setState({ [e.target.name]: e.target.value });
};
render() {
return (
<React.Fragment>
<NavBar /> <h1>Hello from Login {this.props.location.msg}</h1>
<FormWrapper>
<Form>
<Label>Username</Label>
<UserInput
name="username"
type="text"
placeholder="Type your username here"
value={this.state.name}
onChange={this.onChange}
/>
<Label>Password</Label>
<UserInput
name="password"
type="password"
placeholder="Type your password here"
value={this.state.name}
onChange={this.onChange}
/>
<SubmitButt onClick={this.submitForm}>Submasdasdit</SubmitButt>
</Form>
</FormWrapper>
</React.Fragment>
);
}
}
export default Login;
解决方案
推荐阅读
- grep - 打印其余输入以及匹配行
- python - 使用 pandas 元素作为字典中的键
- github-actions - 如何在 Github Actions 步骤中强制退出
- python - 尝试使用 python 将列表组合成二十一点游戏中玩家的子列表
- javascript - 如何为对象随机分配特定颜色?
- php - 如何在 Laravel 查询生成器的 Where 子句中使用数组?
- python-3.x - 如何使用带有列表变量的 pytest 参数化装饰器
- javascript - 如何在 Vue.js 中获取计算数组的长度
- c - C添加到结构指针数组在函数中不起作用
- tensorflow - 如何在 Keras 中使用“有状态”变量/张量创建自定义层?