Tengo un componente de clase, llamado ListOfItems.js , que enumera un montón de objetos así:

 class ListOfItems extends Component { construction (props) { super(props); this.state = { objectList: [] } } } // This gets the list of objects to display componentDidMount() { this.getObjectList(); } componentDidUpdate(_prevProps, prevState) { if( this.state.ObjectList !== prevState.ObjectList) { // this is called infinitely console.log("entered"); this.getObjectList(); } } getObjectList = () => { const input = { id_for_this_list: id } fetch( connectToApi, { method: "PUT", headers: { //stuff} body: JSON.stringify(input) }) .then(res => //) .then(result => //) .catch(err=>{console.error(err)}); }

Dentro de Object.js (el archivo para cada objeto que se muestra en ListOfItems), tengo una funcionalidad de eliminación , donde si el usuario selecciona el ícono "x" en el objeto, ese objeto se elimina de la lista. Una instancia de Object.js dentro de ListOfItems.js se ve así:

 {this.state.objectList.map(item) => { <Object objectList={this.objectList} data={item} //few other props here > }

Una vez que ingreso este ListOfItems.js, el componenteWillUpdate se llama infinitamente, incluso con el condicional. Me gustaría que se llamara solo una vez, cuando el usuario elimine un objeto en la página ListOfItems.