React中如何将子组件的Counter状态值向上传递到父级组件

核心逻辑 #

React 中子组件无法直接向父组件传递数据，需要通过父组件提前传入回调函数，子组件触发回调时携带参数的方式实现，共享状态建议提升到公共父组件维护。

第一步：修改父组件 Products 代码 #

• 新增状态存储计数器总值
• 定义计数器更新回调函数，通过 props 传递给子组件

import { useEffect, useState } from "react";
import ProductList from "./ProductList";

const Products = () => {
    const [products, setProducts] = useState(null);
    // 新增：父组件维护共享的计数器状态
    const [totalCounter, setTotalCounter] = useState(0);
    // 新增：接收子组件传递的增量，更新计数器
    const handleCounterChange = (delta) => {
        setTotalCounter(prevVal => prevVal + delta);
    }

    useEffect (() => {
        fetch('http://localhost:8000/products')
            .then(res => res.json())
            .then(data => setProducts(data))
    }, []);
    
    return ( 
        <div className="ProductList">
            {/* 将回调函数和当前计数器值传给子组件 */}
            {products && <ProductList 
                products={products} 
                onCountUpdate={handleCounterChange}
                currentCounter={totalCounter}
            />}
            {/* 父组件内可直接使用计数器值 */}
            <p>总计数器值：{totalCounter}</p>
        </div>
    );
}

export default Products;

第二步：修改子组件 ProductList 代码 #

移除自身维护的 Counter 状态，直接调用父组件传入的回调函数触发更新：

import Card from "./Card";

const ProductList = (props) => {
    const products = props.products;
    // 调用父组件传入的回调传递增量
    const Count = n => { props.onCountUpdate(n) }

    return ( 
        <div className="ProductList" >
            {/* 子组件需要展示计数器时直接使用传入的prop */}
            <p>当前计数：{props.currentCounter}</p>
            {products.map((product) => (
                <Card product={product} key={product.id} C={Count} />
            ))}
        </div>
    );
}

export default ProductList;

特殊场景兼容 #

如果有业务要求必须让子组件自己维护 Counter 状态，只需要在更新自身状态的同时调用父组件回调同步值即可：

// ProductList 组件内保留自身Counter状态的写法
const [ Counter, setCounter ] = useState(0);
const Count = n => { 
    const newCounter = Counter + n;
    setCounter(newCounter);
    // 同步最新值到父组件
    props.onCountUpdate(newCounter);
}

对应父组件的回调修改为直接接收最新值即可：

const handleCounterChange = (newVal) => {
    setTotalCounter(newVal);
}

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