Javascript 多个react状态更新仅呈现最后一次更新

我做了一个小功能，将自定义警报添加到状态数组中，视图会呈现它们。问题是，如果我连续调用该函数两次，第一个警报只呈现一小会儿，然后被第二个警报替换。当我用鼠标单击调用该方法时，该函数工作正常

我尝试在推送到数组列表之前应用一些等待，但没有成功

const元素=（）=>{
const[alerts，setAlerts]=React.useState（[]）
const addAlert=（数据）=>{
设置警报（[…警报，]）
}
返回(
{
//这仅呈现最后一次状态更新。
addAlert（{消息：“测试”，颜色：“错误”}）；
addAlert（{消息：“2”，颜色：“错误”}）
}
}>
添加警报按钮
{警报}
);
}

代码中的警报

在这两种情况下均指当前渲染的值，因此addAlert无法工作。要解决此问题，可以将setter版本与以下函数一起使用：

setAlerts(currentAlerts => [...currentAlters, <CustomAlert key={alerts.length} message={data.message} color={data.color} />])

setAlerts（currentAlerts=>[…currentAlters，]）

React更新状态。这意味着，当您连续两次更新状态时，直接访问

警报

的值可能没有最新插入的项。调用

setAlerts

时，应改用函数：

const [alerts, setAlerts] = React.useState([]);

  const addAlert = (data) => {
    setAlerts((prevAlerts) => {
      const newAlerts = [...prevAlerts];
      newAlerts.push(
        <CustomAlert
          key={alerts.length}
          message={data.message}
          color={data.color}
        />
      );
      return newAlerts;
    });
  };

  return (
    <div>
      <button
        onClick={() => {
          // this renders only the last state update.
          addAlert({ message: "test", color: "error" });
          addAlert({ message: "2", color: "error" });
        }}
      >
        add alert button
      </button>
    </div>
  );

const[alerts，setAlerts]=React.useState（[]）；
const addAlert=（数据）=>{
setAlerts（（prevAlerts）=>{
const newAlerts=[…prevAlerts]；
newAlerts.push(
);
返回新警报；
});
};
返回(
{
//这仅呈现最后一次状态更新。
addAlert（{消息：“测试”，颜色：“错误”}）；
addAlert（{消息：“2”，颜色：“错误”}）；
}}
>
添加警报按钮
);