Reactjs 如何清空人员选取器?

Reactjs 如何清空人员选取器?,reactjs,spfx,Reactjs,Spfx,我在SharePoint Online网站集上有一个spfx表单,可以将数据读/写到SP列表 我有3个人员选取器,我已成功地将其提交(使用提交按钮)到列表中。我还可以成功地从列表中检索这3个人选择器 问题是当我从任何人员选取器中删除用户时。控制台给我一个错误,无法获取未定义或空引用的属性“id” 我想我需要的东西,可以处理删除功能中的用户,但我想不出什么。 我随后希望用户(使用表单)能够从PP中删除该用户,然后单击更新按钮更新并提交更改 以下是渲染中3个人物选取器中的1个: <Peopl

我在SharePoint Online网站集上有一个spfx表单,可以将数据读/写到SP列表

我有3个人员选取器,我已成功地将其提交(使用提交按钮)到列表中。我还可以成功地从列表中检索这3个人选择器

问题是当我从任何人员选取器中删除用户时。控制台给我一个错误,无法获取未定义或空引用的属性“id”

我想我需要的东西,可以处理删除功能中的用户,但我想不出什么。 我随后希望用户(使用表单)能够从PP中删除该用户,然后单击更新按钮更新并提交更改

以下是渲染中3个人物选取器中的1个:

 <PeoplePicker
         context={this.props.context}
         personSelectionLimit={1}
         groupName={''} // Leave this blank in case you want to filter from all users
         showtooltip={false}
         isRequired={false}
         disabled={false}
         selectedItems={this._deptContGetPeoplePickerItems}//This is the 'onChange'
         showHiddenInUI={false}
         defaultSelectedUsers={this.state.DeptContactPPDefaultItems ? this.state.DeptContactPPDefaultItems : []}//this is the value it means if this.state.PeoplePickerDefaultItems is truthy then show it, if not then don't
         principalTypes={[PrincipalType.User]}
         resolveDelay={1000}
         ensureUser={true}
    />

正如您所看到的,我试图用if从PP中删除一个用户。我似乎认为很多事情都可以用if来处理

如上所述,当我从PP中删除用户时,它会显示“无法获取未定义或空引用的属性“id”。此错误发生在我实际单击PP上的删除x时,而不是在提交或更新btw期间


有人看到我在这里遗漏了什么吗?

我不知道你在问什么,但是这个:
if(items==null){this.setState({linkadvisor:items[0].id,
显然不会做任何错误的事情。是的,现在已经改变了。我认为清空人员选取器不会更新状态。我如何定位这样的事件?嗨,戴夫,谢谢你的提示,我已经在一些帮助下找到了答案。问题是如果没有考虑到“项目”是一个数组,所以我添加了如果(items!==null&&items.length>0){代码已被编辑以反映成功的更改。我不知道您在问什么,但这:if(items==null){this.setState({linkadvisor:items[0].id,显然不会做任何错误的事情。是的,现在已经改变了。我认为清空人员选取器不会更新状态。我如何定位这样的事件?嗨,戴夫,谢谢你的提示,我已经在一些帮助下找到了答案。问题是如果没有考虑到“项目”是一个数组,所以我添加了如果(items!==null&&items.length>0){已编辑代码以反映成功的更改。
 private _deptContGetPeoplePickerItems(items) {
    if(items !== null && items.length >0){
    this.setState({
      DeptContact: items[0].id,
      DeptContactPPDefaultItems: [items[0].secondaryText],

    }
}

      console.log(this.state.DeptContactPPDefaultItems+'this.state.DeptContactPPDefaultItemsADD');
    });
   } 
   if(items !== null && items.length >0){
     this.setState({
      DeptContact: items[0].id,
      DeptContactPPDefaultItems: [items[0].secondaryText]  
     }

     });
   }
  }