Actualmente estoy tratando de hacer que este "proyecto" funcione.
imagen de demostración
https://codesandbox.io/s/flatlisttesting-eiw0x
Comportamiento esperado:
a) al hacer clic en el elemento de FlatList debería cambiar su estado, lo que hace que se marque CheckBox
b) hacer clic en "Seleccionar todo" TouchableOpacity debería hacer que todas las casillas de verificación de los elementos estén marcadas y hacer clic en TouchableOpacity nuevamente después debería desmarcar las casillas de verificación
Resultado:
a) funciona según lo previsto
b) Cuando hago clic en un elemento (marcando la casilla de verificación) y luego trato de presionar TouchableOpacity, las casillas de verificación están marcadas, pero cuando hago clic en TouchableOpacity nuevamente, solo desmarca las casillas de verificación que no estaban previamente marcadas (marcado->desmarcado )
¿Alguien podría arrojar algo de luz sobre este problema?
Gracias por adelantado
Por lo general, no es una buena idea mantener un estado separado dentro del componente y también usar otra fuente de datos externa para una sola fuente de datos. Aquí, su única fuente de datos es su matriz. Entonces, para una mejor convención, la única fuente de su FlatList debe ser la información que pasa. Entonces, si elimina las operaciones de estado adicionales dentro del componente CustomItem, funcionará como se esperaba:
import { TouchableOpacity, View, Text, CheckBox } from "react-native"; import { useState } from "react"; export default function CustomItem({ item, flatListData, setFlatListData }) { function handlePress() { setFlatListData( flatListData.map((element) => { if (item.id === element.id) { return { ...item, isDone: !item.isDone }; } return element; }) ); } return ( <TouchableOpacity onPress={handlePress} style={{ flexDirection: "row" }}> <Text style={{ marginRight: 10 }}>{item.text}</Text> <CheckBox value={item.isDone} onPress={handlePress} /> <Text>{JSON.stringify(item)}</Text> </TouchableOpacity> ); }Al hacerlo, CustomItem solo se basará en la fuente de datos y no necesitará representaciones condicionales adicionales dentro de sí mismo.
Sin embargo, también tengo una sugerencia. Actualmente, su botón Seleccionar todo no funciona como seleccionar todo, sino que funciona como un botón de alternancia. Le sugiero que lo modifique, de modo que seleccione todo si no se seleccionan todos los elementos, y solo desmarque todo si se seleccionan todos los elementos. Depende de usted, por supuesto, pero el nombre y la función no parecen coherentes.