无法恢复用户信息

Question

import React, {Component} from 'react'
class Profile extends Component {
constructor(props) {
super(props)
this.state = {
nom: '',
pnom: '',
username: '',
email: ''
}
}
componentDidMount(){
const token = localStorage.usertoken;
// alert(":"+token);
// const decoded = jwt_decode(token);
this.setState = ({
nom: token.nom,
pnom: token.pnom,
username: token.username,
email: token.email
})
}
render(){
return (
<div className="container">
<div className="jumbotron mt-5">
<h1 className="text-center">PROFILE</h1>
<table className="table col-md-6 mx-auto">
<tbody>
<tr>
<td>Nom</td>
<td>{this.state.nom}</td>
</tr>
<tr>
<td>Prénoms</td>
<td>{this.state.pnom}</td>
</tr>
<tr>
<td>Username</td>
<td>{this.state.username}</td>
</tr>
<tr>
<td>Email</td>
<td>{this.state.email}</td>
</tr> 
</tbody>
</table>
</div>
</div>
)
}
}
export default Profile

嗨，我正在做一个以react为字体端、node.js为后端的项目。我无法恢复用户信息。这是我第一个使用react和nodejs的项目

Answer 1

您需要调用this.setState，而不是分配给它。

this.setState = ({
nom: token.nom,
pnom: token.pnom,
username: token.username,
email: token.email
})

应该是

this.setState({
nom: token.nom,
pnom: token.pnom,
username: token.username,
email: token.email
})

或者更简洁的

const {nom, pnom, username, email} = token;
this.setState({nom, pnom, username, email});

Answer 2

您需要使用它从localStorage 获取状态

localStorage.getItem("usertoken")

还要确保您的localStorage具有该值。测试你可以打开你的浏览器控制台试试这个：

userObject = {
nom: 'samplenom',
pnom: 'pnom',
username: 'sampleusername',
email: 'sampelemail'
}
localStorage.setItem("usertoken", JSON.stringify(userObject))

并且您的setState必须是

this.setState({
nom: token.nom,
pnom: token.pnom,
username: token.username,
email: token.email
})

Answer 3

componentDidMount(){
const token = localStorage.usertoken
const decoded = jwt_decode(token)
this.setState({
nom: decoded.nom,
pnom: decoded.pnom,
username: decoded.username,
email: decoded.email
})
}

我找到了解决方案，问题是我不会在后端中检索所有用户信息