Estoy aprendiendo mobX-state-tree, y en su código de tutorial, veo esto
const App = observer(props => ( <div> <button onClick={e => props.store.addTodo(randomId(), "New Task")}> Add Task </button> {values(props.store.todos).map(todo => ( <div key={todo.id}> <input type="checkbox" checked={todo.done} onChange={e => todo.toggle()} /> <input type="text" value={todo.name} onChange={e => todo.setName(e.target.value)} /> </div> ))} </div> )); render(<App store={store} />, document.getElementById("root")); //store??? Tengo un poco de confusión, ¿dónde se mencionó store ? Por qué podemos usar store como prop, pero no prop={store} , por ejemplo, si cambio store a otra cosa, diga "abcxyz", entonces aparece el error Cannot read properties of undefined (reading 'todos') . Entonces, ¿por qué tenemos una tienda aquí? Por favor dime, muchas gracias
Su código: https://codesandbox.io/s/310ol795x6?file=/index.js
Su tutorial, esta fue la selección "Cómo llegar a la interfaz de usuario" : https://mobx-state-tree.js.org/intro/getting-started
Debería publicar lo que está tratando de hacer, pero creo que necesita comprender los conceptos básicos del objeto javascript y cómo funciona la reacción.
Puedes usar cualquier nombre como accesorio. Pero si elige prop={cualquier objeto}. Tienes que usarlo dentro de tu observador de aplicaciones como:
const App = observer(props => ( <div> <button onClick={e => props.prop.addTodo(randomId(), "New Task")}> Add Task </button> {values(props.prop.todos).map(todo => (El valor que se pasa dentro de las llaves también puede ser cualquier cosa, en este caso están definiendo store como
const store = RootStore.create({ users: {}, todos: { "1": { id: id, name: "Eat a cake", done: true } } });si utiliza
<App store={store} />el objeto props dentro del observador será
{ store: { users: {}, todos: { "1": { id: id, name: "Eat a cake", done: true } } } }ahora si usas
<App prop={store} />el objeto props dentro del observador será
{ prop: { users: {}, todos: { "1": { id: id, name: "Eat a cake", done: true } } } }como puede ver, ya no tiene el almacén de propiedades, por lo que si mantiene props.store.todos, el almacén de propiedades no está definido.
Salud.