Reactjs 为什么useState钩子会这样做？

我正在构建一个组件，它为用户提供多个计数器，用户可以使用useState挂钩递增或递减计数器

 const [counters,setCounters] = useState([0,0,0,0]);
  return (
    counters.map((ele,i) => {
      return (
          <div key={i}>
            <p key='0'>{ele}</p>

            <button key='1' onClick={() => {
            counters[i]++; setCounters(counters);
            }}>+</button>

            <button key='2' onClick={() => {
            var t = [...counters]; t[i]--;
            setCounters(t);
            }}>-</button>

          </div>
      );
    })
  );

const[counters，setCounters]=useState（[0,0,0,0]）；
返回(
counters.map（（ele，i）=>{
返回(
{ele}
{
计数器[i]+；设置计数器（计数器）；
}}>+
{
变量t=[…计数器]；t[i]--；
设置计数器（t）；
}}>-
);
})
);

当我按下“+”按钮并增加计数器变量的值，然后将其传递给setCounters时，没有可见的变化（标签内的值没有变化）。但是，当我对计数器数组的副本执行相同操作时，不仅操作有效，而且结果还反映了我按下“+”按钮的次数，即按下增量按钮时未反映的更改现在也是结果的一部分

此外，如果在递增计数器变量（计数器[I]++）后将其值记录到控制台，则可以看到该值已更改，但p标记中的值相同。这让我相信，出于某种原因，该组件没有呈现。为什么更改状态变量本身会导致这种情况发生

---

任何帮助都将不胜感激

在这一行中，您正试图对

状态进行变异，而您不应该这样做

counters[i]++;

相反，创建一个新数组并将其传递给
setCounter
方法。
或者，更好的方法是，将一个函数传递给
setCounter
方法，迭代数组并只更改所需的元素

const [counters,setCounters] = useState([0,0,0,0]);
return (
  counters.map((ele,i) => {
    return (
      <div key={i}>
        <p key='0'>{ele}</p>

        <button key='1' onClick={() => {
          setCounters((prev) => prev
            .map((counter, index) => index === i ? ++counter: counter));
        }}>+</button>

        <button key='2' onClick={() => {
          var t = [...counters]; t[i]--;
          setCounters(t);
        }}>-</button>

      </div>
    );
  })
);

const[counters，setCounters]=useState（[0,0,0,0]）；
返回(
counters.map（（ele，i）=>{
返回(
{ele}
{
设置计数器（（上一个）=>上一个
.map（（计数器，索引）=>index==i？++计数器：计数器））；
}}>+
{
变量t=[…计数器]；t[i]--；
设置计数器（t）；
}}>-
);
})
);
计数器[i]++变异状态。创建一个新数组，而不是改变现有数组。@当然是的。非常感谢。