Tengo un menú de navegación que carga correctamente los componentes con el enrutador de reacción usando <Link to={"/entity"}>Entities</Link>
Los componentes cargan datos usando axios y los muestran en tablas. Lo que me cuesta lograr es cargar nuevos datos al hacer clic en el <link> una vez más.
class List extends Component { constructor() { super(); this.state = { entities: [], loading: true}; } componentDidMount() { this.getData(); console.log('componentDidMount'); console.log(this.state.entities); } getData() { axios.get(this.props.url).then(response => { this.setState({ entities: response.data, loading: false}) }) } render() { ... }Esto funciona bien para cargar un único conjunto de datos. Pero si edito una fila y abro la lista nuevamente, se recuperará originalmente. ¿Cuál es el comportamiento correcto dado ese código, pero cómo puedo volver a cargar eso? Probé componentDidUpdate pero eso crea un bucle infinito. Supongo que se debe a que componentDidUpdate cambió el DOM, que luego vuelve a llamar a componentDidUpdate.
componentDidUpdate(prevProps) { this.getData(); console.log('componentDidUpdate'); } Pensé en hacer algo como agregar onClick={this.handleClick} a los menús y cambiar estados o pasar valores para indicar un nuevo clic. Pero debe haber una manera de capturar una actualización del enrutador y no solo un cambio del componente.
Si usa
setStatedentro decomponentDidUpdate, actualiza el componente, lo que da como resultado una llamada acomponentDidUpdateque posteriormente llama asetStatenuevamente, lo que da como resultado el bucle infinito. Debe llamar condicionalmente asetStatey asegurarse de que la condición que viola la llamada ocurra eventualmente, por ejemplo:
componentDidUpdate(previousProps, previousState) { if (previousProps.data !== this.props.data) { this.setState({/*....*/}) } }La solución que se me ocurrió fue agregar una marca de fecha al enlace y compararla con la marca de tiempo anterior.
<Link to={{"/entity", state: { update: + new Date() } }}>Entities</Link> componentDidUpdate(prevProps, prevState) { if (prevProps.update !== this.props.update) { this.setState({ loading: true }) this.getData(); //console.log('Data Updating - ' + this.props.update); } }