How to solve ' Maximum update depth exceeded' in my case?

Issue

I'm developing an app in Ionic using React and I've got this error:

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

I have created a form to update some data calling an api request in the backend.

Request: put /xx/xx/update
Body Request: 
{
    "titleId": "1",
    "firstName": "Ani",  
}
Response:
{
    "title": {
        "1": "Dr"
    },
    "firstName": "Ani",
}

Inside the functional component MyData.tsx:

const MyData: React.FC = () => {

//title and firstName come from React Context, I'm using them in the whole app

 const {
    firstName,
    setFirstName,
    title,
    setTitle,
    iserror,
    setIserror,
  } = React.useContext(AuthContext);

  const history = useHistory();
  const authHeader = AuthHeader.getAuthHeader();

const updateData = () => {
    const data = {
      titleId: title,
      firstName: firstName,
    };

axios
      .put("/xx/xx/update", data, { headers: authHeader })
      .then((response) => {

        setTitle(response.data.title);
        setFirstName(response.data.firstName);
     
        return response.data;
      })
      .catch((error) => {
        setMessage(
          "Please check your data and try again"
        );
        setIserror(true);
      });
  };

return (
    <React.Fragment>
      <IonPage className="ion-page" id="main-content">
        
        <IonContent className="ion-padding">
          <h1>Change your data</h1>
          <form className="ion-padding">
            <IonItem>
              <IonLabel position="floating">Title</IonLabel>
              <IonSelect
                value={Object.keys(title)} // this row causes the problem
                onIonChange={(e) => setTitle(e.detail.value!)}
              >
                <IonSelectOption value="0"></IonSelectOption>
                <IonSelectOption value="1">Dr</IonSelectOption>
                <IonSelectOption value="2">Dr.-Ing</IonSelectOption>
                <IonSelectOption value="3">Professor</IonSelectOption>
                <IonSelectOption value="4">Prof.-Dr</IonSelectOption>
              </IonSelect>
            </IonItem>
           
            <IonItem>
              <IonLabel position="floating">Name*</IonLabel>
              <IonInput
                required
                value={firstName}
                onIonChange={(e) => setFirstName(e.detail.value!)}
              ></IonInput>
            </IonItem>
            
            <IonButton
              className="ion-margin-top"
              expand="block"
              onClick={(e) => {
                e.preventDefault();
                updateData();
                history.goBack();
              }}
            >
              Save changes
            </IonButton>
          </form>
        </IonContent>
      </IonPage>
    </React.Fragment>
  );
};
export default MyData;

value={Object.keys(title)} ==> I need to show the actual value of the selected field 'Title' when I open the form, that's why I need 'value' attribute, but this is causing the error. If I remove this line of code, I can update successfully title and name. When I open the form again, title's actual value is not shown, only 'name'.

I'm really new in React/Ionic/Typescript and any help would be appreciated.

Thank you! Ani

Solution

The solution was: Object.values(title) returns array. Cast Object.values(title) to String using this trick:

value={"" + Object.values(title)}

The Ion Select Item:

<IonItem>
              <IonLabel position="floating">Title</IonLabel>
              <IonSelect
                value={"" + Object.values(title)}
                {...register("title")}
              >
                <IonSelectOption value="0"></IonSelectOption>
                <IonSelectOption value="1">Dr</IonSelectOption>
                <IonSelectOption value="2">Ing</IonSelectOption>
                <IonSelectOption value="3">Prof</IonSelectOption>
                <IonSelectOption value="4">Prof.Dr</IonSelectOption>
              </IonSelect>
            </IonItem>
            <IonItem>

Ps. I'm using React Hook Form

Answered By - Ani