The state/prop "multipleInputs" changed during "componentDidLoad()", this triggers extra re-renders, try to setup on "componentWillLoad()" Element

I am getting this warning:

The state/prop "multipleInputs" changed during "componentDidLoad()", this triggers extra re-renders, try to setup on "componentWillLoad()" 
Element

This is the component in question recipe-item

 <Host>
        <ion-item>
          <ion-label>
            <h2>{capitalizeAllFirstLetters(this.name)}</h2>
            <h3>
              <slot name="category"></slot>
            </h3>
            <h3>{this.calories} calories</h3>
            <slot></slot>
            <slot></slot>
          </ion-label>
        </ion-item>
      </Host>

I am using the component this way.

  <recipe-item
                name={recipe.name}
                calories={recipe.calories}
                image={recipe.image}
              >
                <div slot="category" class="ion-text-capitalize">
                  Category: {recipe.category}
                </div>
                <ion-button
                  fill="outline"
                  onClick={() => this.addDailyMeal(recipe)}
                >
                  <ion-icon slot="icon-only" name="add"></ion-icon>
                </ion-button>
                <ion-button
                  fill="outline"
                  onClick={() => goToRecipeInfo(recipe.name)}
                >
                  <ion-icon
                    slot="icon-only"
                    name="information-outline"
                  ></ion-icon>
                </ion-button>
              </recipe-item>

I know this is the component in question because when I to delete a button I don’t get the warning anymore.

I am getting the data from componentWillLoad() so I am not sure what I am doing wrong here.

We just fixed this in fix(item): using multiple items with inputs no longer results in cons… · ionic-team/ionic-framework@e27b5b6 · GitHub and it should be in the next patch update for Ionic Framework.

2 Likes