Estoy empezando con React y ya me he encontrado en un bucle. Estoy creando una aplicación que obtiene datos de una API de Flask. Tengo todo configurado hasta ahora, pero no quiero mostrar todos los datos en la primera página. Más bien, quiero dividir los datos de la API y mostrarlos 10 a la vez.

Mi problema es que logro dividir los datos, pero el DOM no se actualiza con el cambio de estado. Aquí está mi código hasta ahora:

 import React from 'react'; import Navbar from './Components/Navbar'; import Home from './Components/Home'; import {BrowserRouter as Router, Route, useHistory} from 'react-router-dom' import Button from '@restart/ui/esm/Button'; class App extends React.Component { constructor(props) { super(props); this.state = { number: 10 } } updateContent = (prevState) => { this.setState({number: this.state.number + 10}); } render() { return ( <Router> <Navbar /> <Home perPage={this.state.number} /> <div class="text-center mt-3 mb-3"> {this.state.number} <Button className='btn btn-primary' onClick={this.updateContent}>Mai multe intrebari</Button> </div> </Router> ); } } export default App;

Aunque el número está actualizado y puedo mostrar el {this.state.number} actualizado en DOM (en el mismo div que Button ), cambiarlo no actualiza mi componente Home :

 <Home perPage={this.state.number} />

donde perPage es un accesorio que uso para obtener datos de mi API:

 useEffect(() => { fetch("my_flask_api/v1/?id=" + props.perPage) .then(res => res.json()) .then( (result) => { setIsLoaded(true); setItems(result); },

PD: funciona si cambio manualmente el valor del number y actualiza el DOM correctamente, pero no lo hará en setState() .

Cualquier idea es bienvenida. ¡Gracias por adelantado!