React页面刷新后头像用户首字母消失问题求助

问题根源 #

• 你在axios回调里尝试用userName.nameU生成首字母，但setUserName是异步操作，回调执行时userName还是初始空值，导致生成的首字母为空。
• 之前把生成逻辑放在axios外面，此时接口还未返回数据，userName.nameU同样是空值，自然生成不了有效首字母。
• 组件刷新后，avatar初始值为空字符串，且没有监听userName的变化来重新生成首字母，所以页面上看不到首字母。

解决方案 #

方案一：直接用接口返回的姓名生成首字母

在axios的then回调里，直接使用接口返回的res.data.name处理，避免依赖异步更新的userName状态：

const [userName, setUserName] = useState({
  nameU: "",
});
const [avatar, setAvatar] = useState({
  initials: "",
});
useEffect(() => {
  let token = sessionStorage.getItem("logInToken");
  if (!token) token = localStorage.getItem("logInToken");

  if (token) {
    setAuth({ loggedIn: true });
    auth.loggedIn = true;
    const decoded: JWTDeCode = jwt_decode(token!);
    setUser({ email: decoded.email });
    axios
      .get(`http://localhost:4000/users/${decoded.email}`)
      .then((res) => {
        const userRealName = res.data.name;
        setUserName({ nameU: userRealName });
        
        // 生成首字母，兼容单字姓名
        const fullName = userRealName.split(" ");
        let init = "";
        if (fullName.length === 1) {
          init = fullName[0].charAt(0).toUpperCase();
        } else {
          init = (fullName.shift()?.charAt(0) + fullName.pop()?.charAt(0)).toUpperCase();
        }
        setAvatar({ initials: init });
      })
      .catch((err) => {
        console.log(err);
      });
  } else {
    auth.loggedIn = false;
    setAuth({ loggedIn: false });
  }
}, []);

方案二：监听userName变化生成首字母

将状态更新与首字母生成逻辑解耦，通过单独的useEffect监听userName.nameU的变化：

const [userName, setUserName] = useState({
  nameU: "",
});
const [avatar, setAvatar] = useState({
  initials: "",
});

// 初始获取用户数据
useEffect(() => {
  let token = sessionStorage.getItem("logInToken");
  if (!token) token = localStorage.getItem("logInToken");

  if (token) {
    setAuth({ loggedIn: true });
    auth.loggedIn = true;
    const decoded: JWTDeCode = jwt_decode(token!);
    setUser({ email: decoded.email });
    axios
      .get(`http://localhost:4000/users/${decoded.email}`)
      .then((res) => {
        setUserName({ nameU: res.data.name });
      })
      .catch((err) => {
        console.log(err);
      });
  } else {
    auth.loggedIn = false;
    setAuth({ loggedIn: false });
  }
}, []);

// 监听姓名变化，自动生成首字母
useEffect(() => {
  if (!userName.nameU) return;
  
  const fullName = userName.nameU.split(" ");
  let init = "";
  if (fullName.length === 1) {
    init = fullName[0].charAt(0).toUpperCase();
  } else {
    init = (fullName.shift()?.charAt(0) + fullName.pop()?.charAt(0)).toUpperCase();
  }
  setAvatar({ initials: init });
}, [userName.nameU]);

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