React+Node.js项目无法获取用户信息求助（首次开发）

嘿，我看到你第一次用React和Node.js开发就遇到了获取用户信息的问题，咱们一步步来把它搞定！

先看你代码里的几个核心问题：

• setState语法错了：你写的是this.setState = ({ ... })，这是把setState当成属性赋值了，但实际上setState是React组件的方法，得调用它：this.setState({ ... })。
• Token没解析：localStorage.usertoken存的是JWT字符串，不是带用户信息的对象，你把jwt_decode的代码注释掉了，直接访问token.nom肯定拿不到值呀。
• 缺少错误处理：如果localStorage里没token，或者解析失败，页面容易报错，最好加上判断逻辑。

下面是修正后的完整代码：

import React, { Component } from 'react';
import jwt_decode from 'jwt-decode'; // 先确保安装了这个包：npm install jwt-decode

class Profile extends Component {
  constructor(props) {
    super(props);
    this.state = {
      nom: '',
      pnom: '',
      username: '',
      email: ''
    };
  }

  componentDidMount() {
    const token = localStorage.usertoken;
    if (!token) {
      // 没有token的话，可以跳登录页或者给用户提示
      console.log('未找到用户token');
      return;
    }

    try {
      const decoded = jwt_decode(token); // 解析JWT拿到用户信息
      this.setState({ 
        nom: decoded.nom, 
        pnom: decoded.pnom, 
        username: decoded.username, 
        email: decoded.email 
      });
    } catch (error) {
      console.error('解析token失败:', error);
      // 解析出错就清除无效token，比如跳回登录页
      localStorage.removeItem('usertoken');
    }
  }

  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;

关键修改说明： #

1. 修复setState调用：把赋值操作改成调用方法，这是React更新组件状态的正确姿势。
2. 引入并使用jwt_decode：先安装依赖包，再解析token拿到用户信息，才能把数据挂载到state上。
3. 添加错误处理：检查token是否存在，用try-catch捕获解析失败的情况，避免页面崩溃，同时处理无效token的场景。

另外还要确认后端返回的JWT里确实包含nom、pnom、username、email这些字段哦，不然就算解析了也拿不到对应的值~

内容的提问来源于stack exchange，提问作者Joel Dje-bi