Estoy tratando de crear una aplicación de contador donde ciertas tarjetas sean +1 o -1. A medida que se hace clic en cada número del teclado, el contador aumenta +1 o -1. Hasta ahora, he creado un componente personalizado e intento actualizar el estado para contar hacia adelante o hacia atrás.
Mi código a continuación está destinado a usar el objeto de las tarjetas para incrementar o disminuir el conteo, pero para fines de prueba, intenté simplemente crear una función para actualizar el estado para ver si lo estoy usando correctamente, pero parece que no funciona.
export default function App() { const cards = [ { card: "A", count: -1 }, { card: "K", count: -1 }, { card: "Q", count: -1 }, { card: "J", count: -1 }, { card: 10, count: -1 }, { card: 9, count: 0 }, { card: 8, count: 0 }, { card: 7, count: 0 }, { card: 6, count: 1 }, { card: 5, count: 1 }, { card: 4, count: 1 }, { card: 3, count: 1 }, { card: 2, count: 1 }, ]; const [currentCount, setCount] = useState(0); const onPressCard = () =>{ setCount + 1 } return ( <View style={styles.app}> <CardCount useState={currentCount}/> <View style={styles.cards} onPress={onPressCard()}> {cards.map((index) =>(<Card item={index} />))} </View> </View> ); }El componente personalizado que estoy usando. Este componente es donde cambia el conteo.
export const CardCount = ({useState}) => { return ( <Text style={styles.count}>{useState}</Text> ) }¿Cómo puedo actualizar el estado usando las tarjetas de objetos?
Gracias
Incluso fuera de React como marco, o JavaScript como lenguaje, esta declaración por sí sola no hace nada:
setCount + 1Incluso si produce un resultado, nunca se hace nada con ese resultado.
En este caso específico, setCount es una función . Llamas a una función y le pasas argumentos/parámetros:
setCount(currentCount + 1);Lo usas como lo haces en una reacción normal.
export default function App() { const cards = [ { card: "A", count: -1 }, { card: "K", count: -1 }, { card: "Q", count: -1 }, { card: "J", count: -1 }, { card: 10, count: -1 }, { card: 9, count: 0 }, { card: 8, count: 0 }, { card: 7, count: 0 }, { card: 6, count: 1 }, { card: 5, count: 1 }, { card: 4, count: 1 }, { card: 3, count: 1 }, { card: 2, count: 1 }, ]; const [count, setCount] = useState(0); const onPressCard = () =>{ setCount((currentCount) => currentCount + 1); } return ( <View style={styles.app}> <CardCount count={count}/> <View style={styles.cards} onPress={onPressCard()}> {cards.map((index) =>(<Card item={index} />))} </View> </View> ); } export const CardCount = ({count}) => { return ( <Text style={styles.count}>{count}</Text> ) }