在 ReactJs 状态上将项目添加到数组中，并超时以进行自我删除

Add item to array on ReactJs state with timeout for self removal

本文关键字：超时 删除 自我 数组 状态 ReactJs 项目 添加      更新时间：2023-09-26

我创建了一个用于显示来自服务器的返回消息的 MessageList 组件，我希望这些消息仅以该状态存在大约 5 秒左右，我让它全部按照我想要的方式工作添加和显示，但我一生都想不出如何超时从其父数组中删除特定项目.. 香草 JS 答案将用于超时删除自我从数组。

var MainApp = React.createClass({
     AddComment: function() {
        //do some stuff 
        this.showMessage({
            alerttype: "success", 
            title: "Success!", 
            message: "Comment saved to the database."})
        }
    },
    showMessage: function(message) {
        //how to I push this message onto messages for 5 seconds?
    },
    getInitialState: function() {
        return {messages: []};
    },
    render: function () {
        return (
            <div className="mainApp">
                <CommentForm messages={this.state.messages} />
            </div>
        );
    }
});

让我们尝试从您的视图逻辑中抽象出来。我们可以创建一个负责存储带时间戳的消息的数据类型。我们还可以添加一些辅助函数来删除旧项目并检索当前项目列表。然后，您需要做的就是偶尔清除任何旧项目：

function ExpiringMessages(expirationTime) {
    this.messages = [];
}
ExpiringMessages.prototype.add = function (data) {
    this.messages.push({ timestamp: Date.now(), data });
}
ExpiringMessages.prototype.removeOlderThan = function (delta) {
    this.messages = this.messages.filter(m => (Date.now() -  m.time) - delta > 0);
}
ExpiringMessages.prototype.current = function () {
    return this.messages.map(m => m.data);
}

这基本上只是存储一个带时间戳的数据列表，允许您随时清除任何项目。在组件中，您将设置一个间隔（可能每秒左右），以删除超过 5 秒的项目。每次执行此操作时，都会将当前消息列表重置为messages.current() 。

您

需要做的就是将删除包装在 setTimeout 中。 如下所示：

showMessage: function(message) {
    this.setState({
        messages: this.state.messages.concat([message])
    });
    setTimeout(() => this.setState({
        messages: this.state.messages.filter(m => m !== message)
    }), 5000);
},

一种方法是对消息使用时间戳，并在 5 秒超时时添加单独的清理方法：

  • 在 showMessage() 中，使用新消息更新您的状态，并向新消息添加时间戳。
  • 添加一个componentDidUpdate()生命周期方法，该方法调用cleanMessages()方法，并触发 5 秒超时以再次调用 cleanMessages() 方法。
  • 在 cleanMessages() 方法中，检查列表中的任何消息是否> 5 秒（通过将当前时间与每条消息中的时间戳进行比较），删除找到的旧消息，并且仅当删除了消息时，才对更新的消息列表执行setState()。

顺便说一下，看起来代码中}.bind(this);的行破坏了代码，应该删除。

相关文章：