Por ejemplo, agrego 10 componentes.
Cuando hago clic en el botón Mostrar registros en la quinta línea, los primeros 4 componentes aparecen en la consola.
Pero incluso si hago clic en el botón de la quinta línea, quiero que todos los componentes aparezcan en la consola.
import React, { useState, useEffect } from "react"; import ReactDOM from "react-dom"; import { observer } from "mobx-react-lite"; function App() { const [component, setComponent] = useState([]); useEffect(() => {}); const Test = observer(() => { return ( <div> <p> Test <button onClick={testFunction("myFunction"))}>Show logs</button> </p> </div> ); }); function testFunction(a) { console.log(component); console.log(a) } return ( <div> {component.map((Input, index) => ( <Input key={index} /> ))} <button onClick={() => setComponent([...component, Test])}> Click me </button> </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);códigos y caja: https://codesandbox.io/s/react-hooks-useeffect-forked-7q15no
Parece que Observer está obteniendo una versión anterior del componente, que no es consistente con el componente actualizado. En casos como este, useEffect suele ser una mejor opción, ya que se actualiza instantáneamente en lugar de hacerlo de forma asíncrona. Consulte el siguiente código que está funcionando:
El actualizador simplemente hace que se ejecute el gancho useEffect que registra el valor más reciente del componente. El onClick ahora simplemente actualiza el actualizador.
import React, { useState, useEffect } from "react"; import ReactDOM from "react-dom"; import { observer } from "mobx-react-lite"; function App() { const [component, setComponent] = useState([]); const [updater, setUpdater] = useState(0); useEffect(() => {console.log(component)}, [updater]); const Test = observer(() => { return ( <div> <p> Test <button onClick={() => setUpdater(updater + 1)}>Show logs</button> </p> </div> ); }); return ( <div> {component.map((Input, index) => ( <Input key={index} /> ))} <button onClick={() => setComponent([...component, Test])}> Click me </button> </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);