En mi componente principal, tengo un componente de clase llamado ListOfItems.js , que enumera una serie de objetos como este:
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 which is a problem 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 => if( result.length >= 0) { this.setState( {...this.state, objectList: result }); } ) .catch(err=>{console.error(err)}); } render () { return ( {this.state.objectList.map(item) => { <Object objectList={this.objectList} data={item} //few other props here > }} ) }En mi componente secundario, tengo un componente funcional llamado Object.js . En esto, tengo una funcionalidad de eliminación , donde si el usuario seleccionó el ícono "x" en el objeto, ese objeto se elimina de la lista.
// 'x' image that, when clicked on, deletes object from list of objects // (heavily simplified for stackOverFlow) <img onClick= {() => { deleteObject() })> const deleteObject() = () => { fetch( connectToApi, { method: "DELETE" }) .then(res => //) .then(result => //deletion made and confirmed succesful) .catch(err => console.error(err)) }¿Cómo activo el componenteDidUpdate() en ListOfItems.js (principal), cuando hago clic en la "x" en un Objeto (secundario)?
Por cierto, el padre debe ser un componente de clase y el hijo debe ser un componente funcional , desafortunadamente.
Parece que nunca establece el estado de su componente principal cuando llama a getObjectList , por lo que podría ser un problema para usted, no estoy seguro de si lo dejó fuera de este extracto a propósito.
De cualquier manera, deberá transmitir una función del componente principal que establezca el estado que se mantiene en el componente principal. Eso hará que el padre vuelva a renderizar.
Si no desea cambiar el estado, puede llamar a una función que pasa del padre que fuerza una actualización, pero esto no sería lo ideal.
parentResetFunction = () => { this.forceUpdate() }