使用ReactJS显示用户公开名称时出现“publicName未定义”错误求助

问题根源 #

1. publicName 是fetchAccountId函数内部的局部变量，组件其他区域无法访问，这是报错的直接原因。
2. 直接在组件函数顶层调用setPubname(publicName)违反React规则：渲染阶段不能直接修改状态，会引发无限重渲染。
3. 用异步函数fetchAccountId初始化useState，得到的是Promise对象而非实际名称值，完全无效。
4. 直接调用fetchAccountId()却未处理返回的Promise，也没将结果关联到状态。

修复后的代码 #

import React, { useEffect, useState } from "react";

const fetchAccountId = async () => {
  // 模拟异步请求，实际场景可替换为API调用
  const publicName = "Nancy Moore";
  return publicName;
};

function App() {
  const [pubname, setPubname] = useState(null);

  useEffect(() => {
    // 在useEffect中执行异步逻辑，确保仅在组件挂载时运行一次
    const fetchName = async () => {
      const name = await fetchAccountId();
      setPubname(name);
    };
    fetchName();
  }, []);

  return (
    <div>
      <h2> Display Public Name</h2>
      <div>{pubname}</div>
    </div>
  );
}

export default App;

关键修改说明 #

• 移除无效的accounts状态，原代码中该状态既未被使用，初始化方式也错误。
• 将异步获取名称的逻辑移入useEffect，避免在渲染阶段触发状态更新。
• 使用await解析fetchAccountId返回的Promise，再将结果存入状态。
• 渲染时直接读取状态值pubname，无需尝试访问函数内部的publicName（外部无法访问局部变量）。

若需保留双值显示（原代码的OR逻辑） #

如果确实需要同时显示两个变量（比如来自不同数据源），可调整如下：

import React, { useEffect, useState } from "react";

const fetchAccountId = async () => {
  const publicName = "Nancy Moore";
  return publicName;
};

function App() {
  const [publicName, setPublicName] = useState(null);
  const [pubname, setPubname] = useState(null);

  useEffect(() => {
    const fetchNames = async () => {
      const name = await fetchAccountId();
      setPublicName(name);
      setPubname(name);
    };
    fetchNames();
  }, []);

  return (
    <div>
      <h2> Display Public Name</h2>
      <div>{publicName} OR {pubname}</div>
    </div>
  );
}

export default App;

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