Aquí hay una versión simplificada de mi código de reacción. Tengo un gancho como este:
const [todo, setTodo] = useState(); Mi todo se ve así:
todo = { name: 'Name of my todo list', date: 2022-09-19', todos: [ 'groceries', 'do the laundry' ] }En mi componente principal paso a "todos componente" todos:
En mi componente de todos, tengo un bucle en los accesorios para mostrar todas las entradas con el valor de todos
{todos.map(t => { <input value={t} onChange={e => { t = e.target.value }} /> })Pero desafortunadamente no actualiza todo. ¿Cómo hago esto? No puedo usar setTodo porque estoy en el componente secundario y setTodo administra todos los objetos de tareas pendientes, mientras que solo quiero actualizar la lista de tareas pendientes. Mi componente no tiene conocimiento del objeto de tareas pendientes completo, sino solo de la lista de tareas pendientes.
No puedo usar setTodo
Debes. Esa es la única manera de cambiar el estado.
Sin embargo, no necesariamente necesita usarlo directamente en el componente secundario. Tiene mucho sentido querer limitar el componente secundario para que no necesite conocer todo el objeto de tareas pendientes. Para hacer esto, puede pasar una función que sepa cómo hacer la mayor parte de la actualización, y luego hacer que el componente secundario la llame, pasando la poca información de la que el niño está a cargo.
Por ejemplo:
const Parent = () => { const [todo, setTodo] = useState(); return ( <Child todos={todos} onChange={(newValue, index) => { setTodo(prev => { const newArray = [...prev.todos]; newArray[index] = newValue; return { ...prev, todos: newArray }; }); }) /> ); } const Child = ({ todos, onChange }) => { // ... {todos.map((t, i) => { <input value={t} onChange={e => { onChange(e.target.value, i); }} /> }) }