如何在@pnp/spfx-controls-react的People Picker中填充用户值

你用的这个版本的People Picker确实没有受控的value或selectedItems属性，defaultSelectedUsers只在组件第一次初始化时生效，后续更新state不会自动触发组件重新读取这个属性，所以移除行后没法自动填充指定用户。

解决思路很简单，通过强制组件重新初始化来让defaultSelectedUsers生效，具体步骤如下：

1. 给列表项添加唯一key
   React渲染列表时，依赖key值识别组件身份。给循环生成的<tr>或PeoplePicker组件添加唯一key（比如用element.Count，确保每个项的key不重复），这样当你移除行、更新selectedApprover数组后，React会重新创建对应的PeoplePicker组件，从而读取新的defaultSelectedUsers值。

2. 确保removeLineItem正确更新state
   移除行的方法里，必须创建新的数组（不能直接修改原state数组），触发组件重新渲染。比如用filter生成新数组，再通过setState更新。

修改后的代码片段 #

<tbody>
  {this.state.selectedApprover.map((element: any) => {
    return (
      <tr key={element.Count}>
        <td>{element.Count}</td>
        <td>
          <PeoplePicker
            key={element.Count}
            context={this.props.context}
            personSelectionLimit={1}
            onChange={(val: any[]) => this.ChangePeoplePickerValue(element.Count, val)}
            defaultSelectedUsers={element.DefaultUser}
            principalTypes={[PrincipalType.User]}
            resolveDelay={1000}
          />
        </td>
        <td>
          {element.Count === 1 ? (
            ""
          ) : (
            <a href="#" className="removeRow text-danger">
              <Icon
                iconName="SkypeCircleMinus"
                hidden={element.No === 1}
                onClick={() => this.removeLineItem(element.Count)}
              />
            </a>
          )}
        </td>
      </tr>
    );
  })}
</tbody>

正确的removeLineItem示例 #

private removeLineItem(count: number): void {
  // 生成新数组，过滤掉要移除的项
  const updatedApprovers = this.state.selectedApprover.filter(item => item.Count !== count);
  // 更新state触发重新渲染
  this.setState({ selectedApprover: updatedApprovers });
}

另外要注意：element.DefaultUser的格式必须符合PeoplePicker要求，比如包含loginName或id等核心属性，否则组件无法识别并加载用户。

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