React点击按钮时如何仅更新指定组件计数，避免全量更新？

你所有组件共用了App组件里的同一个count状态，所以不管点击哪个按钮，都是更新这个全局的count值，自然所有组件的计数都会同步变化。另外你的按钮点击事件还有个小问题：onClick={()=>updateCount}只是定义了函数但没调用，应该改成直接触发函数的形式。

下面给你两种可行的修复方案：

方案一：用对象管理每个item的独立计数 #

把状态改成对象，以每个item的id作为key存储对应计数，点击按钮时只更新对应id的数值：

import { useState } from 'react';
import { people } from './Data.js';

function App() {
  // 初始化每个item的count为0
  const [counts, setCounts] = useState(() => {
    return people.reduce((acc, item) => {
      acc[item.id] = 0;
      return acc;
    }, {});
  });

  // 接收itemId，仅更新对应id的计数
  const updateCount = (itemId) => {
    setCounts(prevCounts => ({
      ...prevCounts,
      [itemId]: prevCounts[itemId] + 1
    }));
  };

  return (
    <div>
      <h4>List of Items</h4>
      {people.map((item) => (
        <div key={item.id}>
          count: {counts[item.id]}
          {/* 点击时传入当前item的id */}
          <button onClick={() => updateCount(item.id)}>+</button>
        </div>
      ))}
    </div>
  );
}

export default App;

方案二：封装独立子组件 #

把每个item的逻辑抽成单独的子组件，让子组件自己维护count状态，每个组件的状态完全独立：

// App.jsx
import { useState } from 'react';
import { people } from './Data.js';
import Item from './Item';

function App() {
  return (
    <div>
      <h4>List of Items</h4>
      {people.map((item) => (
        <Item key={item.id} item={item} />
      ))}
    </div>
  );
}

export default App;

创建Item.jsx文件：

import { useState } from 'react';

function Item({ item }) {
  // 每个Item组件独有的count状态
  const [count, setCount] = useState(0);

  const updateCount = () => {
    setCount(prev => prev + 1);
  };

  return (
    <div>
      count: {count}
      <button onClick={updateCount}>+</button>
    </div>
  );
}

export default Item;

两种方案都能解决问题：方案二更符合React组件拆分的设计思想，逻辑更清晰；方案一适合不需要拆分组件的简单场景。

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