多个反应状态更新仅呈现最后一次更新答案

【问题标题】：multiple react state updates renders only the last update多个反应状态更新仅呈现最后一次更新
【发布时间】：2020-09-30 10:12:47
【问题描述】：

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

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

const Element = () => {
  const [alerts, setAlerts] = React.useState([])

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

  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>
        {alerts}
      </div>
    </div>
  );
}

【问题讨论】：

标签： javascript reactjs react-hooks state

【解决方案1】：

React 更新状态 asynchronously。这意味着当您连续 2 次更新状态时，直接访问 alerts 的值可能没有最新插入的项目。调用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>
  );

【讨论】：

【解决方案2】：

alerts 在您的代码中指的是两种情况下当前渲染的值，因此您的 addAlert 将不起作用。要解决此问题，您可以使用带有函数的 setter 版本：

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

【讨论】：