如何在 ReactJS 中显示特定时间段的错误消息？

Question

我正在使用 ReactJS。在我的应用程序中，如果发生错误，我需要在一段可编程的时间内向用户显示一条消息。

我通常会实现一个仅基于 props 的无状态 UI 组件，但我知道我需要一个计时器，而是创建了一个名为 Message 的 React 组件来管理计时器和状态。

export class Message extends React.Component {...}

在这个 Message 组件中，我将 props 转换为构造函数中的状态，如果 nextProps 与当前状态不同，则更新 componentWillReceiveProps 中的状态。同样在组件内，如果指定了超时，我将启动计时器。超时时，消息的组件状态为空，导致组件不再显示消息。

当 App 收到错误时，它会创建消息：

<Message message="You have big problems." timeout=5000 />

一切正常，错误信息显示 5 秒。

---

但我一直无法让它正常工作以同时管理这两个用例：

案例1：第一个错误出现并显示后，可能会出现与第一个相同的第二个错误，需要再次显示该错误。

案例2：App可以根据其他状态变化重新渲染，这种情况下我们不会重新显示错误。

为了管理案例 1，我将消息组件中的消息状态在计时器到期后设置为 null。由于此消息状态变量用作显示消息的条件，因此消息消失。当与第一个错误等效的消息发生第二个错误时，新的消息道具现在与消息组件中的空消息状态不同，从而导致新消息显示为新的超时。

这很好用，但现在情况 2 发生时，它会导致组件重新呈现，包括重新呈现发生的最后一条错误消息，不恰当地导致用户看到另一条消息显示。

我知道如果我从 Message 组件中取出计时器并将其放置在应用程序/父级中，我可能会导致 Message 组件在超时后呈现，这将使它工作，但看起来如此无法管理 Message 组件本身的超时生命周期是错误的。

有什么解决办法吗？还是我确实发现了 ReactJS 无法轻松管理的场景？

谢谢。

Answer 1

控制它的一种方法是在您的Message 上添加几个额外的道具：

onTimeout() {
  this.setState({ open: false });
}

render() {
  const { open } = this.state;
  <Message open={open} onTimeout={this.onTimeout} message="..." timeout={5000} />
}

open 属性将控制消息是否被渲染。如果open 设置为false，则应取消任何计时器。 onTimeout 函数应该在超时触发后被调用，从这里，您可以控制可见性状态。