React JS中无法获取通过props传递的state数据问题

你的代码存在3处问题，导致props传递始终为空：

• useEffect 未传入依赖数组，默认会在组件每次渲染时执行，触发「state更新→组件重渲染→useEffect再次执行→再次更新state」的无限循环，state更新逻辑无法正常生效
• 混淆了函数组件和类组件的写法：函数组件不需要内置render方法，也不能直接在组件内调用render挂载到根节点，这部分逻辑应该抽离到入口文件，App组件本身只需要返回JSX结构即可
• catch块为空，当localStorage不存在token、token格式错误导致解码失败时，没有任何错误提示，会直接静默失败，state始终保留初始的空对象值

修正后的App组件代码 #

import { useState, useEffect } from 'react';
import { BrowserRouter } from 'react-router-dom';
import jwtDecode from 'jwt-decode';
import Navbar from './Navbar'; // 按你的项目实际路径调整导入

export default function App() {
  const [userName, setUserName] = useState(null);

  // 空依赖数组：仅在组件首次挂载时执行一次token解析逻辑
  useEffect(() => {
    try {
      const jwt = localStorage.getItem("token");
      if (!jwt) return;
      const user = jwtDecode(jwt);
      setUserName(user);
    } catch (ex) {
      console.error("Token解析失败：", ex);
    }
  }, []);

  return (
    <BrowserRouter>
      <div className="App">
        {/* 增加加载判断，避免用户信息未加载完成时Navbar拿不到参数报错 */}
        {userName ? <Navbar {...userName} /> : <span>用户信息加载中</span>}
      </div>
    </BrowserRouter>
  );
}

入口文件（一般为src/index.js）调整 #

把原来写在App组件内的根节点挂载逻辑移到入口文件：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

调整后首次加载时会只执行一次token解析，解析完成后更新state触发重渲染，Navbar就能正常接收到传入的用户属性。

内容的提问来源于stack exchange，提问作者HassanJalali