在用户登录表单中，当我单击登录按钮时，它会给出一个令牌。我正在本地存储中设置令牌并重定向到“客户”页面。页面被重定向到“客户”但页面未呈现。我在客户页面中添加了一个 console.log 以检查页面是否正在呈现与否。在这种情况下，它不会渲染它。
登录表单
import React from 'react';
import _ from 'lodash';
import axios from '../config/Axios';
class LoginForm extends React.Component {
constructor() {
super()
this.state = {
email: '',
password: '',
error: '',
}
this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}
handleChange(e) {
this.setState({
[e.target.name]: e.target.value
})
}
handleSubmit(e) {
e.preventDefault()
const loginData = {
email: this.state.email,
password: this.state.password,
}
axios.post('/users/login', loginData, {
headers: {
'x-auth': localStorage.getItem('token')
}
})
.then((response) => {
console.log(response.data)
if (response.data.error) {
const error = response.data.error
this.setState({ error })
}
else {
const token = response.data.token
localStorage.setItem('token', token);
this.props.history.push('/customers')
}
})
.catch(err => console.log(err))
}
render() {
return (
<div className="form-group container">
<h1>Login</h1>
<form onSubmit={this.handleSubmit}>
<br />
<label htmlFor="email-login">Email</label>
<br />
<input type="email" value={this.state.email} onChange={this.handleChange} name="email" id="email-login" />
<br />
<label htmlFor="password-login">Password</label>
<br />
<input type="password" value={this.state.password} onChange={this.handleChange} name="password" id="password-login" />
<br />
<button type="submit" className="btn btn-info">Login</button>
{
!_.isEmpty(this.state.error) && <h3>{this.state.error}</h3>
}
</form>
</div>
)
}
}
export default LoginForm
客户页面
class CustomerList extends React.Component {
constructor() {
super()
this.state = {
customers: [],
isLoading: true,
}
this.handleChange = this.handleChange.bind(this)
this.handleSave = this.handleSave.bind(this)
}
componentDidMount() {
axios.get('/customers', {
headers: {
'x-auth': localStorage.getItem('token')
}
})
.then(response => {
console.log(response.data)
const customers = response.data
this.setState({ customers, isLoading: false })
return customers
})
.catch(err => console.log(err))
}
handleChange(text) {
console.log(this.state.customers)
const customerDatas = this.state.customers
const customers = customerDatas.filter((customerData => {
return customerData.name.toLowerCase().includes(text)
}))
if (this.state.customers.length) {
this.setState({ customers })
}
else {
console.log(`${customers}......`)
this.componentDidMount()
}
}
render() {
console.log('customer localStorage', localStorage)
return (
<div>
<br />
<SearchBox handleChange={this.handleChange} />
<br />
{this.state.isLoading ? (
<Loader />
) : (
<div>
<h3>Progress Bar</h3>
</div>
)}
<br />
</div>
)
}
}
export default CustomerList