React Native中如何基于卡片对象更新状态？计数应用开发问题

你的代码存在几个关键问题导致状态更新失效，以下是修正方案：

1. 点击事件与状态更新逻辑错误 #

• View组件本身不支持onPress事件，需使用TouchableOpacity/TouchableWithoutFeedback等可触摸组件实现点击交互
• onPress属性需要传递函数引用，而非直接执行函数（原代码onPressCard()会在渲染时立即触发，而非点击卡片时执行）
• setCount是状态更新函数，必须传入新的状态值；原代码setCount + 1的写法完全错误，使用函数式更新（prevCount => prevCount + cardCount）能确保依赖最新状态值

2. 未关联卡片的计数变化值 #

点击卡片时需要获取当前卡片对应的count值，才能让计数器按照对应规则增减

3. Props命名规范问题 #

CardCount组件的props使用了useState这个React Hook的保留名称，应改为语义化的名称如currentCount

修正后的完整代码 #

App组件

import { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Card } from './Card';
import { CardCount } from './CardCount';

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);

  // 接收卡片对应的count值，更新计数器
  const onPressCard = (cardCount) => {
    setCount(prevCount => prevCount + cardCount);
  };

  return (
    <View style={styles.app}>
      {/* 修正props名称，传递当前计数 */}
      <CardCount currentCount={currentCount} />
      <View style={styles.cardsContainer}>
        {/* 给每个卡片绑定点击事件，传递卡片数据与唯一key */}
        {cards.map((cardItem, index) => (
          <Card key={index} item={cardItem} onPress={onPressCard} />
        ))}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  app: {
    flex: 1,
    padding: 20,
    alignItems: 'center',
    justifyContent: 'center',
  },
  cardsContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'center',
    marginTop: 20,
  },
});

Card组件（自定义）

import { TouchableOpacity, Text, StyleSheet } from 'react-native';

export const Card = ({ item, onPress }) => {
  return (
    // 每个卡片单独绑定点击事件，传递当前卡片的count值
    <TouchableOpacity 
      style={styles.card}
      onPress={() => onPress(item.count)}
    >
      <Text style={styles.cardText}>{item.card}</Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  card: {
    width: 60,
    height: 80,
    borderWidth: 1,
    borderColor: '#000',
    borderRadius: 8,
    alignItems: 'center',
    justifyContent: 'center',
    margin: 5,
  },
  cardText: {
    fontSize: 20,
    fontWeight: 'bold',
  },
});

CardCount组件（自定义）

import { Text, StyleSheet } from 'react-native';

export const CardCount = ({ currentCount }) => {
  return (
    <Text style={styles.count}>当前计数: {currentCount}</Text>
  );
};

const styles = StyleSheet.create({
  count: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
});

内容的提问来源于stack exchange，提问作者ubermo