Estoy aprendiendo a reaccionar en este momento y actualmente estoy haciendo una aplicación de tareas pendientes para poder entender cómo reaccionar más fácilmente. Así que esto es lo que estoy tratando de hacer:
Código:
const [check, setCheck] = useState(false); const [todo, setTodo] = useState([]); function handleClick() { let toAdd = prompt('Title: ') setTodo([...todo, { title: toAdd }]); } useEffect(()=> { if(todo.length !== 0) { setCheck(true); } }) return ( <div className="wholeContainer"> <div className="tododiv"> <span className="todos">Todos: </span> <hr/> { check ? todo.forEach((eachTodo)=> { <TodoItems title={eachTodo}/> }) : <span>Nothing</span> } </div> <button className="add" onClick={handleClick}> <i className="fas fa-plus"></i> Add a Todo </button> </div> ); La const [check, setCheck] = useState(false); está escrito para que pueda acceder a la matriz if todo.length !== 0 ;
El problema viene en la parte de renderizado. No puedo encontrar una manera de mostrar todas y cada una de las tareas pendientes en su propio <TodoItems/> , y también cuando uso forEach() , no sucede nada porque creo que alguien me dijo que setState() funciona de forma asíncrona. ¡De verdad necesito algún consejo!
Gracias...
Tu estas usando
todo.forEach((eachTodo)=> { <TodoItems title={eachTodo}/> })Cuándo deberías estar usando
todo.map((eachTodo)=> { return <TodoItems title={eachTodo}/> })O
todo.map((eachTodo)=> ( <TodoItems title={eachTodo}/> ))También tienes un bucle infinito en tu componente:
useEffect(()=> { if(todo.length !== 0) { setCheck(true); } })Cada vez que el componente se actualiza, cuando la lista de tareas pendientes no está vacía, establece Check en verdadero, lo que desencadena un nuevo procesamiento. Además, no necesita usar el estado para cada variable, solo las que fueron un cambio deberían activar una nueva representación.
Además, su nuevo estado de lista de tareas pendientes depende del estado anterior, por lo que debe usar una actualización funcional.
https://reactjs.org/docs/hooks-reference.html
const [todoList, setTodoList] = useState([]); function handleClick() { let toAdd = prompt('Title: '); setTodoList((prevTodoList) => [...prevTodoList, toAdd]); } const isTodoListEmpty = todoList.length === 0 return ( <div className="wholeContainer"> <div className="tododiv"> <span className="todos">Todos: </span> <hr /> {!isTodoListEmpty ? ( todoList.forEach((todoItem) => { <TodoItems title={todoItem} />; }) ) : ( <span>Nothing</span> )} </div> <button className="add" onClick={handleClick}> <i className="fas fa-plus"></i> Add a Todo </button> </div> );