@pnp/spfx-controls-react PeoplePicker控件问题：单选数据与编辑回显异常

问题根源 #

1. 单用户数据不准确：原代码用text和secondaryText提取用户信息，这两个是显示层面的文本，并非可靠的用户名（loginName）和邮箱字段，容易出现数据偏差。
2. 编辑回显失败：defaultSelectedUsers传入的item?.customFieldId格式不符合控件要求，PeoplePicker需要包含loginName或id的用户对象才能识别并回显选中状态。

修改后的代码 #

{
  id: EVENTS_MANAGE_CONTENT_FIELD_KEY_VALUE.PUBLISH_BY_ID,
  title: EVENTS_MANAGE_CONTENT_FIELD_KEY_VALUE.PUBLISH_BY_LABEL,
  type: CustomCollectionFieldType.custom,
  required: DEFAULT_DATA_TYPE_VALUE.TRUE,
  onCustomRender: (field, value, onUpdate, item, itemId, onError) => {
    return React.createElement(PeoplePicker, {
      context: this.context as any,
      personSelectionLimit: 1,
      showtooltip: DEFAULT_DATA_TYPE_VALUE.TRUE,
      key: itemId,
      // 回显处理：用字段存储的历史数据，确保包含loginName字段
      defaultSelectedUsers: value || [],
      onChange: (items: any = []) => {
        if (items.length === 0) {
          // 清空选中状态时同步数据
          item.customFieldId = [];
          onUpdate(field?.id, []);
          return;
        }
        // 提取官方定义的用户名和邮箱字段
        const selectedUser = {
          loginName: items[0].loginName,
          email: items[0].email,
          text: items[0].text,
          secondaryText: items[0].secondaryText
        };
        // 更新数据存储
        item.customFieldId = [selectedUser];
        onUpdate(field?.id, [selectedUser]);
      },
      showHiddenInUI: DEFAULT_DATA_TYPE_VALUE.FALSE,
      principalTypes: [PrincipalType.User],
    });
  },
}

关键改动说明 #

• 回显修复：把defaultSelectedUsers的数据源改为value（该字段存储的历史数据），确保传入的是包含loginName的用户对象数组，控件可直接匹配并显示已选中用户。
• 可靠数据提取：直接从选中项中取loginName（官方标准用户名字段）和email字段，替代原有的显示文本字段，避免数据不一致问题。
• 空值处理：增加选中项为空时的逻辑，确保清空操作能正确同步到数据存储中。

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