mgt-react的PeoplePicker组件defaultSelectedUsers属性无法预填充用户怎么办

问题根因与解决方案 #

你的猜测符合mgt-react的组件设计规则，defaultSelectedUsers属性无法直接传入邮箱实现预填充是常规表现，可按以下方案排查修复：

• 首选方案：使用defaultSelectedUserIds属性传值
  该属性接收AAD用户的Object ID（即用户全局唯一标识），只要传入正确的ID即可稳定实现预填充，不需要额外适配其他属性。如果你的存储层只存了用户邮箱，可以先调用Microsoft Graph的GET /users/{email}接口获取对应用户ID再传值。
• 如果你坚持用邮箱传值，需要同时满足两个条件：
  1. 配置userType="User"属性显式指定用户类型
  2. 传入的邮箱必须和AAD中存储的用户userPrincipalName完全一致，大小写、后缀均不能有差异
• 异步场景的兼容处理
  所有带default前缀的属性仅在组件首次渲染时生效，如果你的编辑页用户数据是接口异步拉取的，组件首次渲染时还没拿到用户信息，defaultSelectedUsers自然不会生效，这种情况要改用受控属性selectedUsers自己管理选中状态，示例代码如下：

import { useState, useEffect } from 'react';
import { PeoplePicker } from '@microsoft/mgt-react';
import { Providers, ProviderState } from '@microsoft/mgt-element';

const EditPage = () => {
  const [selectedUsers, setSelectedUsers] = useState([]);
  const [isLoginReady, setIsLoginReady] = useState(false);

  // 等待登录状态初始化完成再加载组件，避免时序问题
  useEffect(() => {
    const updateState = () => {
      setIsLoginReady(Providers.globalProvider.state === ProviderState.SignedIn);
    };
    Providers.globalProvider.onStateChanged(updateState);
    return () => Providers.globalProvider.removeStateChangedListener(updateState);
  }, []);

  // 拉取编辑数据后更新选中用户
  useEffect(() => {
    if (isLoginReady) {
      // 这里替换为你自己的接口拉取逻辑
      fetchEditData().then(res => {
        // 传入用户ID数组即可自动填充
        setSelectedUsers([res.userAadId]);
      })
    }
  }, [isLoginReady]);

  return isLoginReady ? (
    <PeoplePicker
      selectedUsers={selectedUsers}
      selectionMode="single"
      selectionChanged={e => setSelectedUsers(e.detail)}
    />
  ) : null;
}

• 额外验证技巧
  你可以先手动选择一次需要预填充的用户，在selectionChanged事件中打印e.detail拿到完整的用户对象，参考返回的id、userPrincipalName字段取值，就能快速确认你需要传入的参数格式。

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