Custom Form resets the People Picker Field?

Question

I open an Item in the SharePoint List "A" to edit it. All values present in my custom Form, everything is nice, I can edit all, except the People Picker. I add a new person to the filed, and in a secound later is this field is empty. I have really no idea, what's wrong.

Constructor:

constructor(props: IRrlFormProps) {

super(props);
this.addListItem = this.addListItem.bind(this);
this.getZustaendigePersonen = this.getZustaendigePersonen.bind(this);
this.state = {
  user: props.currentItem.Zustaentiger?.map(item=> item.Name.replace('i:0#.f|membership|','')) || [],

}

The UI

<PeoplePicker context={this.props.context}
        titleText="Zuständiger"
        disabled={false}
        defaultSelectedUsers={this.state.user}
        data-automation-id="addSelectedUsers"
        personSelectionLimit={5}
        placeholder="Max 5 Personen"
        ensureUser={true}
        onChange={this.getZustaendigePersonen}
        ref={c => (this.ppl = c)}
        errorMessage= { errorMessages.Zustaendiger }
      ></PeoplePicker>

The method for People Picker

public getZustaendigePersonen(items: any[]) {
console.log('Items:', items);
let tempuser: any[] = [];
items.map((item) => {
  tempuser.push(item.id.toString());

});
this.setState({ user: tempuser });

}

I add/update:

public addListItem = (): any => {

const urlForID: any = new URL(window.location.href);
const itemID = parseInt(urlForID.searchParams.get('ID'));
const itemProperties = {
        'ZustaentigerId': { results: this.state.user },
}

    // item push in the SharePoint List
    if(!itemID){
      sp.web.lists.getByTitle('MAIN')
      .items.add(itemProperties)
      .then(() => {
        console.log('Das Element mit der ID ${itemId} wurde erfolgreich aktualisiert');
        const listUrl = "https://xyz.sharepoint.com/teams/everything/abc";
        window.location.href = listUrl;
      })
        .catch((error) => {
          console.log(`Beim Aktualisieren des Elements mit der ID ${itemID} ist ein Fehler aufgetreten: ${error}`);
        
        });
    } else {
      sp.web.lists.getByTitle('MAIN')
      .items.getById(itemID).update(itemProperties)
      .then(() => {
        console.log('Das Element mit der ID ${itemId} wurde erfolgreich aktualisiert');
        const listUrl = "https://xyz.sharepoint.com/teams/everything/abc";
        window.location.href = listUrl;
      })
        .catch((error) => {
          console.log(`Beim Aktualisieren des Elements mit der ID ${itemID} ist ein Fehler aufgetreten: ${error}`);
        });
    }

Any idea?

Answer 1

Change you binding of onChange property from this.getZustaendigePersonen to this.getZustaendigePersonen.bind(this) or using Arrow Function like this (userIds) => { this.getZustaendigePersonen(userIds); }

Approach 1

<PeoplePicker context={this.props.context}
        titleText="Zuständiger"
        disabled={false}
        defaultSelectedUsers={this.state.user}
        data-automation-id="addSelectedUsers"
        personSelectionLimit={5}
        placeholder="Max 5 Personen"
        ensureUser={true}
        onChange={this.getZustaendigePersonen.bind(this)}
        ref={c => (this.ppl = c)}
        errorMessage= { errorMessages.Zustaendiger }
      ></PeoplePicker>

Approach 2

<PeoplePicker context={this.props.context}
            titleText="Zuständiger"
            disabled={false}
            defaultSelectedUsers={this.state.user}
            data-automation-id="addSelectedUsers"
            personSelectionLimit={5}
            placeholder="Max 5 Personen"
            ensureUser={true}
            onChange={(userIds) => { this.getZustaendigePersonen(userIds); }}
            ref={c => (this.ppl = c)}
            errorMessage= { errorMessages.Zustaendiger }
          ></PeoplePicker>

Please find explanation of binding method with this at below link:

• https://medium.com/weekly-webtips/why-react-event-handlers-bind-methods-with-this-51b121e0fad
• https://legacy.reactjs.org/docs/handling-events.html