How to save changes with a custom form?

Question

My Custom form has 2 Buttons: Save and Cancel. The Cancel works fine, but the Save does nothing. I get no one error. In RrlForm.tsx has an method - updateItem, this read the new inputs from imputfields and updates in the list the item. (some code below)

  <DefaultButton onClick={() => this.updateListItem() }> Save</DefaultButton>

public updateListItem = (): any => {

const { selectedOption } = this.state;
const { geschlecht } = this.state;
const { title } = this.state;
const { firstname } = this.state;
const { lastname } = this.state;
const { phone1 } = this.state;
const { phone2 } = this.state;
const { svnr } = this.state;
const { inquiry } = this.state;
const { isChecked } = this.state;

    sp.web.lists.getByTitle('Listname')
      .items.getById(68).update({
        'Rubrik': selectedOption,
        'Geschlecht': geschlecht,
        'Title': title,
        'Vorname': firstname,
        'Nachname': lastname,
        'Telefon1': phone1,
        'Telefon2': phone2,
        'SVNR': svnr,
        'ZustaentigerId': { results: this.state.user },
        'Anfrage': inquiry,
        'Mail': isChecked,
        'zusaetzlichId': { results: this.state.zusaetzlich },
      })
      .then(() => {
        alert("Items are saved!");
        this.cancel();
      }
      ).catch((e: any) => console.error(e));

    const url: any = new URL(window.location.href);
const targetURL = url.searchParams.get('Source') || ('https://xyz.sharepoint.com/teams/MyTestSite');
document.location.href = targetURL;

}

Any idea, why doesn't it work?

Answer 1

I'd guess you're navigating before the update occurs. You'll either want to use async/await or only do the redirection in the then. Give this a try:

  <DefaultButton onClick={this.updateListItem}> Save</DefaultButton>

public updateListItem = (): any => {

    const { selectedOption } = this.state;
    const { geschlecht } = this.state;
    const { title } = this.state;
    const { firstname } = this.state;
    const { lastname } = this.state;
    const { phone1 } = this.state;
    const { phone2 } = this.state;
    const { svnr } = this.state;
    const { inquiry } = this.state;
    const { isChecked } = this.state;

    sp.web.lists.getByTitle('Listname')
      .items.getById(68).update({
        'Rubrik': selectedOption,
        'Geschlecht': geschlecht,
        'Title': title,
        'Vorname': firstname,
        'Nachname': lastname,
        'Telefon1': phone1,
        'Telefon2': phone2,
        'SVNR': svnr,
        'ZustaentigerId': { results: this.state.user },
        'Anfrage': inquiry,
        'Mail': isChecked,
        'zusaetzlichId': { results: this.state.zusaetzlich },
      })
      .then(() => {
        alert("Items are saved!");
        this.cancel();

        const url: any = new URL(window.location.href);
        const targetURL = url.searchParams.get('Source') || ('https://xyz.sharepoint.com/teams/MyTestSite');
        document.location.href = targetURL;
      }).catch((e: any) => console.error(e));
}

Answer 2

In the update method, for the "ZustaentigerId" you are trying to assign a user state variable, can you check is it a valid value, if not pass the user Id.