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

我创建了一个MessageList组件，用于显示来自服务器的返回消息，我希望这些消息仅在状态下存在约5秒左右，我可以按照我的要求添加和显示所有消息，但我一辈子都无法思考如何超时从父数组中删除特定项。。一个普通的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>
        );
    }
});

var MainApp=React.createClass({
AddComment:function（）{
//做点什么
这是showMessage({
alerttype:“成功”，
标题：“成功！”，
消息：“注释已保存到数据库。”}）
}
},
showMessage：功能（消息）{
//如何将此消息推送到消息上5秒钟？
},
getInitialState:函数（）{
返回{消息：[]}；
},
渲染：函数（）{
返回(
);
}
});

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

• 在

  showMessage（）

  中，使用新消息更新您的状态，并为新消息添加时间戳
• 添加一个

  componentdiddupdate（）

  lifecycle方法，该方法调用

  cleanMessages（）

  方法，并触发5秒超时以再次调用

  cleanMessages（）

  方法
• 在

  cleanMessages（）

  方法中，检查列表中的任何消息是否超过5秒（通过将当前时间与每条消息中的时间戳进行比较），删除找到的旧消息，只有在有消息被删除时，才对更新的消息列表执行

  setState（）

---

顺便说一下，它看起来像是一行

}.bind（this）会破坏代码，应该将其删除。
让我们尝试从视图逻辑中抽象出来。我们可以创建一个负责存储时间戳消息的数据类型。我们还可以添加一些帮助函数来删除旧项目和检索当前项目列表。然后，您只需偶尔清除任何旧项目：

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

Hi@wintvelt，不是
}.bind（this）
将this对象从react组件传递到函数，
this.showMessage
没有它就无法工作。@NickDewitt计算括号。如果我没有弄错的话，至少应该从绑定行中删除前导的}。要将其绑定到showMessage调用，而不是addComment对象..是的，先生，我错误地从实际版本中删除了一些不相关的内容，这正是我一直试图做但没有成功的事情——我的消息不仅仅是一个字符串，尽管它是一个稍微复杂一点的对象——不管消息的类型是什么is@NickDewitt你能在你的问题中加入你试过的代码吗？我现在正在做，我现在已经开始工作了——我正在为生成的每条消息生成一个id，并将其用作删除的密钥itself@NickDewitt不需要身份证。您应该能够检查引用是否相等。