React中箭头函数返回值在Typography组件展示报错求助

核心问题拆解 #

你遇到的警告本质上有两个触发点：

1. 箭头函数返回的是对象而非字符串，React无法直接在Typography中渲染对象，会引发渲染异常，间接导致状态更新相关警告；
2. 如果user数据是通过异步请求获取的，组件可能在请求完成前就已卸载，此时更新状态会触发内存泄漏警告。

步骤1：修正文本生成函数 #

将函数返回值改为直接返回字符串，同时优化逻辑和代码规范：

const displayBirthdayOrNot = (user) => {
  let birthInformation = "";
  if (user.birthday != null || user.placeOfBirth != null) {
    const isMale = user.isMale ? "Né" : "Née";
    birthInformation += isMale;
  }
  if (user.birthday != null) {
    birthInformation += ` le ${user.birthday}`;
  }
  // 修正原逻辑：仅当出生地非空时添加，避免空字符串导致无效文本
  if (user.placeOfBirth != null && user.placeOfBirth.trim() !== "") {
    birthInformation += ` à ${user.placeOfBirth}`;
  }
  return birthInformation;
}

步骤2：修正渲染代码 #

直接渲染函数返回的字符串即可：

<Typography component="div">
  {displayBirthdayOrNot(user)}
</Typography>

步骤3：处理异步数据场景（如果适用） #

如果user是通过异步请求获取的，需要在组件卸载时终止状态更新，避免内存泄漏：

import { useEffect, useState, useRef } from 'react';

function YourComponent() {
  const [user, setUser] = useState(null);
  const isMounted = useRef(true);

  useEffect(() => {
    const fetchUser = async () => {
      try {
        const response = await fetch('/api/user');
        const data = await response.json();
        // 仅在组件挂载时更新状态
        if (isMounted.current) {
          setUser(data);
        }
      } catch (error) {
        console.error('获取用户数据失败:', error);
      }
    };

    fetchUser();

    // 组件卸载时标记为未挂载
    return () => {
      isMounted.current = false;
    };
  }, []);

  // 数据未加载时显示占位内容
  if (!user) {
    return <div>加载中...</div>;
  }

  return (
    <Typography component="div">
      {displayBirthdayOrNot(user)}
    </Typography>
  );
}

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