如何在React两个不同组件中同步递增两个计数器？

你需要将图片数据的状态提升到父组件中统一维护，这样单图点赞修改数据源后，父组件的总点赞数会自动同步更新，具体修改如下：

修改后的父组件代码 #

import { useState } from 'react';

const ImagesPage = () => { 
    // 将静态数据改为父组件响应式状态
    const [images, setImages] = useState([
        {id: 1, image: "image1.jpg", likes: 62},
        {id: 2, image: "image2.jpg", likes: 35},
        {id: 3, image: "image3.jpg", likes: 45}
    ]);

    // 单图点赞更新方法，传给子组件调用
    const handleImageLike = (imageId) => {
        setImages(prevImages => prevImages.map(img => {
            if (img.id === imageId) {
                return {...img, likes: img.likes + 1}
            }
            return img
        }))
    }

    // 修正原方法变量错误，用reduce计算总点赞更简洁
    const getTotalLikes = () => {
        return images.reduce((total, image) => total + image.likes, 0)
    }

    return (
        <div>
            <Images
                data={images}
                onLike={handleImageLike}
            />
            <Counter
                totalLikes={getTotalLikes()}
            />
        </div>
    )
}

父组件修改说明：

• 把原来的静态images数组转为父组件的响应式状态，数据变化时会触发组件重新渲染
• 新增handleImageLike方法，接收图片ID作为参数，更新对应图片的点赞数
• 修正原getTotalLikes的变量名错误，改用reduce计算总点赞数更简洁

修改后的子组件代码 #

const Images = ({data, onLike}) => { 
    return (
        <>
            {data.map(elt => (
                <div key={elt.id}>
                    <img src={elt.image} alt={elt.id}/>
                    {/* 点击时传入当前图片ID，调用父组件的更新方法 */}
                    <button onClick={() => onLike(elt.id)}>{elt.likes}</button>
                </div>
            ))}
        </>
    )
}

子组件修改说明：

• 移除子组件内部的局部count状态，直接使用父组件传入的每个图片自带的likes值展示
• 点击点赞按钮时，调用父组件传入的onLike方法，传入当前图片的ID触发父组件状态更新
• 给map遍历的元素添加根容器，解决JSX返回多节点的报错问题

原代码存在的其他问题 #

• 原getTotalLikes方法中使用了未定义的likesList变量，实际应该累加声明的totalLikes变量
• 原Images组件所有图片共用同一个局部count状态，会导致点一个按钮所有图片的计数都变化
• 原Images组件map遍历返回了两个同级节点（img和button）没有外层容器，会触发JSX语法错误

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