es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Por qué la lista no se vuelve a renderizar después de actualizar la tienda?

11 Jun, 2023 Programación

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

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema aquí es que ha creado dos instancias separadas de la tienda en sus componentes Lista y ListForm usando la función listStore(). Cuando agrega un elemento a la tienda en ListForm, no se actualiza los listItems de la instancia de la tienda del componente Lista.

    Para solucionar esto, debe pasar la misma instancia de la tienda a ambos componentes envolviéndolos en un componente proveedor:

    import { Provider } from 'mobx-react';

const store = listStore();

export const App = () => {
  return (
    <proveedor store="{store}">
      <lista></lista>

  );
};

    Luego, puede acceder a la misma instancia de la tienda en los componentes ListForm y List a través de la función inject:

    import { inject, observer } from 'mobx-react';

export const ListForm = inject('store')(observer(({ store }) => {
  const [value, setValue] = useState();

  return (
    <>
      <input type="text" onchange="{e" ==""> setValue(e.target.value)} />
      <button onclick="{()" ==""> store.addItem(value)}>Agregar nota</button>

  );
}));

export const Lista = inject('store')(observer(({ store }) => {
  return (
    <react.fragment>
      <ul>
        {store.listItems.map(item => {
          return <li key="{item}">{item}</li>;
        })}
      </ul>
      <listform></listform>
    </react.fragment>
  );
}));

    Ahora, cuando agrega un elemento desde ListForm, el componente List se volverá a renderizar con los listItems actualizados de la misma instancia de la tienda.

Comments are closed.