Estoy tratando de crear una función que cuando se llama, establece el estado del objeto {elemento: 'lo que sea que el usuario escriba', lista: [... lista, todo]}; Sin embargo, no sé cómo configurar el nuevo estado y devolver <li>{todo}</li> al mismo tiempo. He estado atascado por un tiempo, así que agradecería si me pueden ayudar.
const Todo = () => { const [state, setState] = useState({ item: '', list: [] }); const setTodoValue = (e) => { setState((previousState) => { return { ...previousState, item: e.target.value }; }); }; const addTodo = () => { setState((previousState) => { return { ...previousState, list: [...previousState.list, previousState.item], }; }); }; return ( <div> <input onChange={setTodoValue} type="text" /> <button onClick={addTodo}> + </button> {} </div> ); };No puede, o no quiere, actualizar el estado y devolver JSX simultáneamente. Pones en cola una actualización de estado, React actualiza el estado y describe cómo representar el JSX desde el estado. El retorno de representación debe tomar el state y asignarlo a un grupo de elementos li de elementos de lista.
Para obtener más detalles sobre la representación de JSX desde matrices, consulte Listas y claves .
Ejemplo de representación de state.list en una lista desordenada:
const Todo = () => { const [state, setState] = useState({ item: '', list: [] }); const setTodoValue = (e) => { setState((previousState) => { return { ...previousState, item: e.target.value }; }); }; const addTodo = () => { setState((previousState) => { return { ...previousState, list: [...previousState.list, previousState.item], }; }); }; return ( <div> <input onChange={setTodoValue} type="text" /> <button type="button" onClick={addTodo}> + </button> <ul> {state.list.map(todo => ( <li key={todo}>{todo}</li> ))} </ul> </div> ); };