Javascript 如何在登录后显示用户的姓名

我是React的新手，只需要使用JWT和MySQL登录和注册页面，但现在我希望在用户登录时显示用户的名称。有人能帮我吗？我共享了我的登录和注册组件。我想我可以通过在另一个组件上添加类似于Welcome{props.name}

的东西来实现这一点，但它不起作用

import React，{Component}来自'React'；
导入“./Login.css”；
从“axios”导入axios；
从“react router dom”导入{Link}；
导出默认类登录扩展组件{
建造师（道具）{
超级（道具）；
此.state={
电邮：“，
密码：“”，
}
}
handleChange=（e）=>{
这是我的国家({
[e.target.name]：e.target.value
})
}
登录=（）=>{
const{email，password}=this.state；
axios（“/users/login”{
方法：“张贴”，
数据：{
电子邮件，
密码，
}
})。然后（响应=>{
setItem（'token'，response.data.token）；
this.props.history.push（“/track”）；
console.log（response.data）
}).catch（错误=>{
console.log（错误）
})
}
render（）{
返回(






登录
不是会员？注册
)
}
}

如果要使用道具显示用户名，则必须从父组件传递

名称

道具。但是，您首先需要从服务器获取用户名。您的代码可能如下所示

父组件：

class ParentComponent extends Component {

const getUserName = () => {
 axios('/path/to/user/endpoint', {
  method: 'get'
 })
 .then(response => {
   this.setState({name: response.data.name})
 })
 .catch(err => {
   console.log(err);
 })
};

render(
 <Track name={this.state.name} />
);

}

类ParentComponent扩展组件{
const getUserName=（）=>{
axios（“/path/to/user/endpoint”{
方法：“获取”
})
。然后（响应=>{
this.setState（{name:response.data.name}）
})
.catch（错误=>{
控制台日志（err）；
})
};
渲染(
);
}

您可能希望在路由到

/track

后从服务器获取数据，而不是像上面所示从父组件传递name prop。如果选择使用此方法，则可以重用上一个示例中显示的

getUserName

函数

---

最后，如果您想在全局范围内使用用户名，您可能需要花一些时间学习诸如Redux之类的库，以便可以使用全局状态。

我可以不使用localStorage而不是Redux来实现这一点吗？