React函数组件返回对象无法访问及格式转换问题求助

核心问题分析 #

原代码中ProfileData作为React函数组件，直接返回普通对象{graphData}违反React规则——React组件的返回值必须是可渲染的JSX元素、null、字符串或数字，不能直接返回纯JavaScript对象，这是导致无法访问数据的根本原因。

修复步骤与代码示例 #

1. 将ProfileData重构为自定义Hook #

把数据获取逻辑封装成自定义Hook，直接返回graphData和加载状态，供其他组件调用：

// ProfileData.js
import { useState, useEffect } from 'react';
import { useMsal } from "@azure/msal-react";
import { InteractionStatus, InteractionRequiredAuthError } from "@azure/msal-browser";
import { loginRequest } from "./authConfig";
import { callMsGraph } from "./components/MsGraphApiCall";

export const useProfileData = () => {
  const { instance, inProgress } = useMsal();
  const [graphData, setGraphData] = useState({ mail: '', displayName: null });
  const [loading, setLoading] = useState(true);

  useEffect(() => {
      if (inProgress === InteractionStatus.None) {
          callMsGraph()
            .then(response => {
              setGraphData({ mail: response.mail, displayName: response.displayName });
              setLoading(false);
            })
            .catch((e) => {
              if (e instanceof InteractionRequiredAuthError) {
                  instance.acquireTokenRedirect({
                      ...loginRequest,
                      account: instance.getActiveAccount()
                  });
              }
              setLoading(false);
            });
      }
  }, [inProgress, instance]);

  return { graphData, loading };
};

2. 调整utils.js中的组件 #

修改组件接收graphData作为props，处理数据为空的边界情况：

// utils.js
import { IconButton } from '@mui/material';
import { AccountCircleOutlinedIcon } from '@mui/icons-material';

export const NameContent = ({ graphData }) => {
    if (!graphData.displayName) return null;
    return (
        <div className="nameContent" align="center">
            <IconButton href="https://myaccount.microsoft.com" target="_tab" color="inherit">
                <AccountCircleOutlinedIcon />&nbsp;{graphData.displayName}
            </IconButton>
        </div>
    );
};

export const getEmailString = (graphData) => {
    return graphData.mail || '';
};

3. 在app.js中使用数据 #

通过自定义Hook获取数据，传递给UI组件，并直接使用graphData.mail拼接API地址：

// app.js
import { useProfileData } from './ProfileData';
import { NameContent, getEmailString } from './utils';
import { Typography } from '@mui/material';

function App() {
  const { graphData, loading } = useProfileData();

  // 处理加载状态
  if (loading) {
    return <div>加载中...</div>;
  }

  // 拼接API URL，用encodeURIComponent处理特殊字符
  const apiUrl = `${utils.RUNTIME_BACKEND_URL}/data?email=${encodeURIComponent(getEmailString(graphData))}`;

  // 可在此处发起API调用（例如用useEffect）
  // useEffect(() => {
  //   fetch(apiUrl)
  //     .then(res => res.json())
  //     .then(data => console.log(data));
  // }, [apiUrl]);

  return (
    <div>
      <Typography variant="h5" align="right">
        <NameContent graphData={graphData} />
      </Typography>
    </div>
  );
}

export default App;

关键说明 #

• 自定义Hook是React复用状态逻辑的标准方式，完美解决"组件无法返回纯对象"的问题；
• 加入loading状态避免数据未加载完成时渲染空内容或报错；
• 用encodeURIComponent编码邮箱地址，避免特殊字符导致API调用失败。

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