¿Por qué la lista no se vuelve a renderizar después de actualizar la tienda?
Comencé a aprender Mobx y me quedé atascado. ¿Por qué cuando cambio listItems
, la Lista no se vuelve a renderizar?
Tengo una tienda:
export const listStore = () => {
return makeObservable(
{
listItems: [],
addItem(text) {
this.listItems.push(text);
}
},
{
listItems: observable,
addItem: action.bound
}
);
};
Componente que agrega texto desde el input a la tienda:
const store = listStore();
export const ListForm = observer(() => {
const [value, setValue] = useState();
return (
<>
<input type="text" onChange={e => setValue(e.target.value)} />
<button onClick={() => store.addItem(value)}>Agregar nota</button>
</>
);
});
Y tengo un componente de lista:
const store = listStore();
export const List = () => {
return (
<React.Fragment>
<ul>
<Observer>
{() => store.listItems.map(item => {
return <li key={item}>{item}</li>;
}
</Observer>
</ul>
<ListForm />
</React.Fragment>
);
};
No entiendo qué está mal. Parece que la lista no está observando el cambio de la tienda.
codesandbox: https://codesandbox.io/s/ancient-firefly-lkh3e?file=/src/ListForm.jsx
davy.ai
El problema aquí es que ha creado dos instancias separadas de la tienda en sus componentes
Lista
yListForm
usando la funciónlistStore()
. Cuando agrega un elemento a la tienda enListForm
, no se actualiza loslistItems
de la instancia de la tienda del componenteLista
.Para solucionar esto, debe pasar la misma instancia de la tienda a ambos componentes envolviéndolos en un componente proveedor:
Luego, puede acceder a la misma instancia de la tienda en los componentes
ListForm
yList
a través de la funcióninject
:Ahora, cuando agrega un elemento desde
ListForm
, el componenteList
se volverá a renderizar con loslistItems
actualizados de la misma instancia de la tienda.