Recientemente estoy trabajando con react.js y quiero crear una aplicación de tareas pendientes. En mi estado escribo lo siguiente:
this.state={tasks: [ ["Eat",true], ["Sleep",false], ["Read",true]]}Este estado se representará en diferentes casillas de verificación.
Y en el contenido que quiero renderizar:
<div className="todo-app__total">{Num} Left</div> El Num aquí es la variable que quiero demostrar cuántos elementos hay que aún no están completos (falso). En el caso anterior, Num =2.
Los otros botones funcionan correctamente ahora, por lo que el estado puede cambiar dinámicamente con el tiempo, pero espero que Num pueda cambiar simultáneamente cuando el estado se haya actualizado.
¿Cómo recopilo la cantidad de miembros verdaderos, mientras no están en la misma matriz (en la misma columna)?
Asumiendo que tienes un objeto como,
{nombre: 'Dormir', completado: falso}
puede verificar de la siguiente manera,
items.filter(item=>item.completed == true)?.lengthSi está buscando una solución fácil, simplemente use lo siguiente
<button>{this.state.tasks.filter(task=>task[1] == true)?.length}</button>Pero no estoy seguro de si eso funcionará, debe crear otro estado, no necesariamente, pero es limpio y fácil de entender. Además, debe tener una matriz de objetos.
this.state={ tasks: [ {name: "Eat", completed: true}, {name: "Sleep", completed: false}, {name: "Read", completed: true} ], done: 2, }Esta es la forma correcta de hacerlo. Entonces solo lee esto desde el botón.
<div className="todo-app__total">{done} Left</div>Y después de completar un todo, simplemente aumente o disminuya el valor de hecho como se muestra a continuación.
// After completing a todo this.setState({ done: done++ }) // after undoing a todo this.setState({ done: done-- })Y si necesitas más ayuda, solo muéstrame el código completo.