javascript - 将项目添加到 ReactJs 状态的数组中，并设置超时以进行 self 删除

Question

我创建了一个 MessageList 组件，用于显示来自服务器的返回消息，我希望这些消息仅在该状态中存在大约 5 秒左右，我已经按照我想要的方式添加和显示了它，但是我我一生都无法思考如何超时从其父数组中删除特定项目。Vanilla JS 答案可以解决从数组中超时删除 self 的问题。

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>
        );
    }
});

Answer 1

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

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()。