Estoy haciendo una sencilla aplicación de lista de tareas pendientes para poner en práctica lo que estoy aprendiendo, y lo estoy haciendo en Typescript. Literalmente, hace media hora, la aplicación funcionaba bien, pero ahora "de repente" (seguramente toqué algo que no debería y no me doy cuenta de qué) no puedo aplicar .map() en mi variable de estado donde almaceno las tareas del usuario porque en teoría es un objeto.
Código del componente donde creo mi estado y lo defino como un arreglo:
import React, { useState, useEffect } from 'react' import InputForm from '../InputForm/InputForm' import ItemsContainer from './ItemsContainer' export default function Container() { const [userTasks, setUserTasks] = useState( new Array<{ id: string; name: string; completed: boolean }>() ) // This function is received by <InputForm /> and it returns the new Task. // Updates the current tasks (userTasks state) with the new { task } received. const addTaskHandler = (task: any) => { setUserTasks(task) } useEffect(() => { setUserTasks(JSON.parse(window.localStorage.getItem('Task') || '{}')) }, []) useEffect(() => { window.localStorage.setItem('Task', JSON.stringify(userTasks)) }, [userTasks]) return ( <div className="flex flex-col px-4 container mx-auto sm:max-w-screen-sm"> {console.log(Array.isArray(userTasks(} <InputForm onAddTask={addTaskHandler} /> <ItemsContainer tasks={userTasks} /> </div> ) }Código del componente donde hago el .map():
import React from 'react' import Items from '../Items/Items' interface Props { tasks: Array<{ id: string name: string completed: boolean }> } const ItemsContainer: React.FC<Props> = ({tasks}) => { return ( <ul className='h-96 overflow-auto flex flex-col items-center scrollbar-hide'> {tasks.map((task) => ( <Items name={task.name} key={task.id} /> ))} </ul> ) } export default ItemsContainerEstoy bastante seguro de que la causa principal de este error debe ser enviarme a usar Typescript a ciegas y sobre la marcha, pero me gustaría irme sabiendo el error.
Esta es una de las razones por las que debe evitar usar any cuando use TypeScript. Escriba las cosas correctamente y podrá ver los problemas durante la compilación, no durante el tiempo de ejecución. Si usa any , está anulando el propósito de usar TypeScript.
Con
const addTaskHandler = (task: any) => { setUserTasks(task) } Parece que task es un elemento singular de algún tipo, en cuyo caso llamar
setUserTasks(task) luego establecerá el estado en esa única tarea , y no en una matriz (lo que significará que fallará la llamada a .map ).
Averiguar el tipo de tipo de una tarea: parece que podría ser
{ id: string; name: string; completed: boolean }y escriba el argumento como ese, y luego agregue ese elemento a la matriz en el controlador.
type Task = { id: string; name: string; completed: boolean }; const [userTasks, setUserTasks] = useState<Task[]>([]); const addTaskHandler = (task: Task) => { setUserTasks([...userTasks, task]); }