为什么两次调用 setState 会导致一次状态更新？

这可能是初学者的 React 错误，但我想使用“add2Messages”调用“addMessage”两次，但它只注册一次。我猜这与 React 中的 hooks 工作方式有关，我该如何使其工作？

export default function MyFunction() {
  const [messages, setMessages] = React.useState([]);

  const addMessage = (message) => {
    setMessages(messages.concat(message));
  };

  const add2Messages = () => {
    addMessage("Message1");
    addMessage("Message2");
  };

  return (
    <div>
      {messages.map((message, index) => (
        <div key={index}>{message}</div>
      ))}
      <button onClick={() => add2Messages()}>Add 2 messages</button>
    </div>
  );
}

我正在使用反应 17.0.2

当使用正常形式的状态更新时，React 将批处理多个setState调用单个更新并触发一个渲染以提高性能。

使用功能状态更新将解决这个问题：

const addMessage = (message) => {
  setMessages(prevMessages => [...prevMessages, message]);
};

const add2Messages = () => {
  addMessage('Message1');
  addMessage('Message2');
};

有关功能状态更新的更多信息：

功能状态更新是更新状态的另一种方法。这是通过传递一个回调函数来实现的，该函数将更新后的状态返回到setState.

React 将使用之前的状态调用此回调函数。

当您只想将先前状态增加 1 时，功能状态更新如下所示：

setState((previousState) => previousState + 1)

优点是：

1. 您可以将之前的状态作为参数进行访问。因此，当新状态依赖于先前状态时，该参数很有用，因为它解决了陈旧状态的问题（当您使用正常状态更新来确定下一个状态时可能会遇到这种情况，因为状态是异步更新的）

2. 状态更新不会被跳过。

3. 使用时更好地记忆处理程序useCallback因为依赖项大多数时候可以为空：

   const addMessage = useCallback((message) => {
     setMessages(prevMessages => [...prevMessages, message]);
   }, []);