React.js开发MongoDB Realm Web应用如何设置当前项目并解决读取报错

报错的核心是app.currentUser.customData.memberOf为undefined，你尝试读取它的第0项元素时触发了类型错误，常见触发场景有3种：

• Realm自定义用户数据是异步拉取的，组件首次渲染时数据还没从服务端返回，customData是空对象，不存在memberOf字段
• Realm后台没有正确配置自定义用户数据规则，或者当前登录用户的文档中没有memberOf数组字段
• 页面加载时用户还未完成登录，app.currentUser本身为null，后续属性读取直接失败

1. 增加安全取值与兜底默认值 #

修改useState的初始值，用可选链避免访问不存在的属性时报错，同时设置兜底默认值：

const [currentProject, setCurrentProject] = React.useState(
  app.currentUser?.customData?.memberOf?.[0] || null
);

2. 监听自定义数据加载完成后更新状态 #

新增useEffect主动刷新用户自定义数据，等数据拉取完成后再更新状态：

React.useEffect(() => {
  // 未登录时跳过逻辑，可自行增加重定向到登录页的逻辑
  if (!app.currentUser) return;
  const loadUserData = async () => {
    // 主动刷新最新的自定义用户数据
    await app.currentUser.refreshCustomData();
    // 数据加载完成后更新当前项目
    setCurrentProject(app.currentUser.customData?.memberOf?.[0] || null);
  };
  loadUserData();
}, [app.currentUser]);

3. 增加加载状态避免空白/报错 #

新增加载状态，数据未准备完成时展示加载提示，不渲染业务组件：

const [loading, setLoading] = React.useState(true);

// 修改上面的useEffect，加载完成后关闭loading
React.useEffect(() => {
  if (!app.currentUser) return;
  const loadUserData = async () => {
    await app.currentUser.refreshCustomData();
    setCurrentProject(app.currentUser.customData?.memberOf?.[0] || null);
    setLoading(false);
  };
  loadUserData();
}, [app.currentUser]);

// 渲染时加判断
if (loading) {
  return <div>加载中...</div>;
}

4. 检查Realm后台配置 #

如果做完以上修改还是拿不到memberOf数据，去Realm后台核对以下配置：

• 进入「用户」-「自定义用户数据」页，确认已开启自定义用户数据，关联的集合、用户ID字段配置正确
• 确认对应用户的文档中存在memberOf字段，且为数组类型，至少包含一个元素
• 确认集合的访问规则允许用户读取自己的用户文档

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