此问题在此处已有答案：

Why React useState with functional update form is needed?（5个答案）
昨天关门了。
我正在学习React，我有一个问题。有时候当我们想要设置一个新值时，我们会使用先前的State：

import React, { useState } from "react";

function HookCounter() {
  const initialCount = 0;
  const [count, setCount] = useState(initialCount);
  return (
    <div>
      Count: {count}
      <button onClick={() => setCount(initialCount)}>Reset</button>
      <button onClick={() => setCount((prevState) => prevState + 1)}>
        Increment
      </button>
      <button onClick={() => setCount((prevState) => prevState - 1)}>
        Decrement
      </button>
    </div>
  );
}

export default HookCounter;

这是因为我们正在先前状态的基础上构建新状态。
这是否意味着如果我们使用spread操作符（例如在数组或对象中），我们不需要使用前一个State？因为spread已经给了我们前一个State？
例如

import React, { useState } from "react";

function ArrayCounter() {
  const [items, setItems] = useState([]);

  const addItem = () => {
    setItems([
      ...items,
      {
        id: items.length,
        value: Math.floor(Math.random() * 10) + 1,
      },
    ]);
  };
  return (
    <div>
      <button onClick={addItem}>Add a number</button>
      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.value}</li>
        ))}
      </ul>
    </div>
  );
}

export default ArrayCounter;

谢谢大家！