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

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

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

Answer 2

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

在showMessage()内，使用新邮件更新您的状态，并为新邮件添加时间戳。
添加componentDidUpdate()生命周期方法，该方法调用cleanMessages()方法，并触发5秒超时以再次调用cleanMessages()方法。
在cleanMessages()方法内，检查列表中的任何消息是否为＆gt; 5秒钟（通过比较每条消息中的当前时间与时间戳），删除找到的旧消息， 仅在删除消息时 ，执行setState()更新的消息列表。

顺便说一句，您的代码中的行}.bind(this);似乎会破坏代码，应该删除。

Answer 3

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

showMessage: function(message) {
    this.setState({
        messages: this.state.messages.concat([message])
    });

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

在ReactJs状态下将项添加到数组，并使用超时进行自我删除

3 个答案: