React上下文在超时不在

Question

我正在使用React App上下文存储一系列“警报对象”，这基本上是可能发生的任何错误，我想在网站的右上角显示。我遇到的问题是，上下文在超时内部没有最新。我为测试所做的工作是获得一个按钮，在单击上下文时，将一个警报对象添加到上下文中，另一个组件在上下文中通过该数组映射并呈现它们。我希望它们在5秒后消失，因此我添加了一个超时，该超时会过滤刚刚添加并删除它的项目。问题在于，在超时范围内，Alerts数组似乎具有与5秒前相同的值，而不是使用最新值导致问题和元素未被过滤。我不确定我的逻辑是否有问题，还是我正在使用上下文错误的事情？

        onClick={() => {
          const errorPopup = getPopup(); // Get's the alert object I need
          context.setAlerts([errorPopup, ...context.alerts]);
          setTimeout(() => {
            context.setAlerts([
              ...context.alerts.filter(
                (element) => element.id !== errorPopup.id,
              ),
            ]);
          }, 5000);
        }}

Answer 1

onClick={() => {
          const errorPopup = getPopup(); // Get's the alert object I need
          context.setAlerts([errorPopup, ...context.alerts]);
          setTimeout(() => {
            context.setAlerts(alerts => [
              ...alerts.filter(
                (element) => element.id !== errorPopup.id,
              ),
            ]);
          }, 5000);
        }}

这应该解决。直到react@17 setStates在事件处理程序中进行批处理（在React@18 All SetStates甚至是异步的setstates ），因此您需要使用最新鲜的状态在第二setAlerts中进行更新。

为了安全起见，使用cb语法也是第一个setstate中的一个好练习。

Answer 2

我认为修复程序将是将Context.SetAlerts（...）移动到一个单独的函数（例如removePopupPromContext（ID：String）），然后通过将errorpopopup.id作为参数来调用SettiMeout中的此函数。

我不确定您的context.setAlerts的实现，但是如果它基于SetState函数，那么您也可以使用一个函数在setState中使用一个可以让您跳过创建的函数，也可以做一些类似的反应。可能会轻轻翻译成的额外功能：

setContext(prevContextState =>({
  ...prevContextState, 
  alerts: prevContextState.alerts.filter(your condition)
)})