React Native中如何从父组件监听子组件Counter的状态变化？

你遇到的问题是React中典型的子组件向父组件传递状态场景，完全可以通过给子组件传递回调函数的方式解决。核心思路是让父组件统一维护购物车的全局状态，子组件（Counter）在数量变化时调用父组件传递的回调，把更新后的数量和对应商品信息传给父组件，这样父组件就能实时计算总数量和总价了。

下面是具体的代码修改步骤：

1. 父组件：维护购物车状态并传递回调 #

首先在父组件中添加购物车状态，同时实现处理数量变化的回调函数，并计算总数量和总价：

import { useState } from 'react';
import { FlatList, View, Text, TouchableOpacity, Image } from 'react-native';
import Counter from './Counter';

export default function ProductList({ data }) {
  // 用对象存储购物车，key是商品id，value是{count: 数量, price: 单价}
  const [cart, setCart] = useState({});

  // 处理子组件传来的数量变化
  const handleCountChange = (itemId, itemPrice, newCount) => {
    setCart(prevCart => {
      const updatedCart = { ...prevCart };
      // 如果数量为0，从购物车中移除该商品
      if (newCount === 0) {
        delete updatedCart[itemId];
      } else {
        // 更新或添加商品的数量和价格
        updatedCart[itemId] = { count: newCount, price: itemPrice };
      }
      return updatedCart;
    });
  };

  // 计算总商品数量
  const totalItemCount = Object.values(cart).reduce((total, item) => total + item.count, 0);
  // 计算总价
  const totalPrice = Object.values(cart).reduce((total, item) => total + (item.count * item.price), 0);

  return (
    <View style={{ flex: 1 }}>
      <FlatList 
        data={data} 
        keyExtractor={(item) => item.id} // 确保每个商品有唯一id
        renderItem={({ item }) => ( 
          <View style={styles.container}> 
            <View style={styles.left}> 
              <Text style={styles.title}>{item.name}</Text> 
              <Text style={styles.description}>{item.description}</Text> 
              <Text style={styles.price}>${item.price}</Text> 
              {/* 给Counter传递必要的props */}
              <Counter 
                initialCount={cart[item.id]?.count || 0} // 初始化数量为购物车中已有的数量
                onCountChange={(newCount) => handleCountChange(item.id, item.price, newCount)}
              /> 
            </View> 
            <Image style={styles.right} source={{uri: item.image}}/> 
          </View> 
        )} 
      />

      {/* 购物车汇总按钮，只有当有商品时才显示 */}
      {totalItemCount > 0 && (
        <TouchableOpacity 
          style={styles.cartButton}
          onPress={() => {
            // 这里写跳转到购物汇总页的逻辑
            console.log('跳转至购物汇总页');
          }}
        >
          <Text style={styles.cartButtonText}>
            购物车：{totalItemCount} 件 · 总计 ${totalPrice.toFixed(2)}
          </Text>
        </TouchableOpacity>
      )}
    </View>
  );
}

// 样式可以根据你的需求调整
const styles = {
  container: { flexDirection: 'row', padding: 16, borderBottomWidth: 1, borderColor: '#eee' },
  left: { flex: 1 },
  title: { fontSize: 16, fontWeight: 'bold' },
  description: { fontSize: 14, color: '#666', marginVertical: 4 },
  price: { fontSize: 16, color: '#f5222d', marginVertical: 8 },
  right: { width: 80, height: 80, borderRadius: 8 },
  cartButton: { position: 'absolute', bottom: 20, left: 20, right: 20, backgroundColor: '#1890ff', padding: 16, borderRadius: 8 },
  cartButtonText: { color: '#fff', textAlign: 'center', fontSize: 16 }
};

2. 子组件（Counter）：接收回调并触发状态更新 #

修改Counter组件，接收父组件传递的initialCount和onCountChange回调，在数量变化时调用回调通知父组件：

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

export default function Counter ({ initialCount, onCountChange }) { 
  // 用父组件传递的initialCount初始化本地状态
  const [count, setCount] = useState(initialCount); 

  const handleAddition = () => { 
    const newCount = count + 1;
    setCount(newCount);
    // 通知父组件数量变化
    onCountChange(newCount);
  }; 

  const handleDeletion = () => { 
    if (count === 0) return; // 数量为0时不做操作
    const newCount = count - 1;
    setCount(newCount);
    // 通知父组件数量变化
    onCountChange(newCount);
  }; 

  return ( 
    <View style={styles.adder}> 
      <TouchableOpacity onPress={handleDeletion}> 
        <Text style={styles.less}>-</Text> 
      </TouchableOpacity> 
      <Text style={styles.counter}>{count}</Text> 
      <TouchableOpacity onPress={handleAddition}> 
        <Text style={styles.more}>+</Text> 
      </TouchableOpacity> 
    </View> 
  ); 
}

const styles = {
  adder: { flexDirection: 'row', alignItems: 'center', marginTop: 8 },
  less: { fontSize: 20, paddingHorizontal: 12, color: '#666' },
  counter: { fontSize: 16, paddingHorizontal: 16 },
  more: { fontSize: 20, paddingHorizontal: 12, color: '#1890ff' }
};

为什么这样做？ #

• 父组件统一管理购物车状态，避免了每个子组件独立维护状态导致的数据不一致问题；
• 通过回调函数实现子传父，是React中最常用且符合单向数据流原则的方式；
• 每个商品的数量变化是独立的，不会出现“选一个商品所有数量同时变”的问题；
• 父组件可以实时计算总数量和总价，方便展示购物车汇总按钮。

需要注意的是：你的商品数据必须包含唯一的id字段（用来在购物车对象中区分不同商品），如果当前数据没有，建议在Firestore文档中添加或者生成唯一标识。

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