在用户编辑评论时停止实时更新？答案

【问题标题】：Stop the live updates while user is editing comment?在用户编辑评论时停止实时更新？
【发布时间】：2016-06-27 09:09:26
【问题描述】：

我的博客上有一个评论系统。问题是 cmets 是通过 WebSockets 实时更新的。在更新 cmets 时，当然所有者必须能够编辑他们的 cmets。我想启用就地编辑（这意味着评论将被替换为文本框和保存/放弃按钮）。我的 React 应用程序订阅了套接字事件并更改了组件状态中的 comments 数组。这意味着在用户编辑评论时，如果有新内容出现，编辑将被残酷地停止。

话虽如此，我想到了两种可能的方法： 1.当用户正在编辑评论时，停止实时更新（即暂时忽略套接字事件） 2.不断更新cmets，但一直滚动评论编辑器（我不知道如何处理）

我认为在用户编辑评论时停止实时更新是愚蠢的，所以我问你，在更新 cmets 时应该如何保持编辑器在那里？

更多关于我的应用程序结构：

我有组件<PostComments />，其state 包含数组comments。该数组随后被渲染为一堆<Comment />：

renderComments = () => {
    const { comments } = this.state;

    return comments.map( comment => {
        return (
            <Comment key={comment['comment_id']} data={comment} />
        );
    } );
};

<Comment /> 组件获取要渲染的静态数据（即具有标准形状的对象

export const commentDataType = React.PropTypes.shape( {
    comment_id: React.PropTypes.number.isRequired,
    user_info: React.PropTypes.shape( {
        preferred_name: React.PropTypes.string.isRequired,
        profile_picture: React.PropTypes.string.isRequired,
    } ).isRequired,
    post_timestamp: React.PropTypes.number.isRequired,
    comment_text: React.PropTypes.string.isRequired,
} );

这有点像。谢谢！

【问题讨论】：

理想情况下，即使在编辑某个 cmets 时，您也应该保持实时更新，您只是不更新那个。
所以我应该在comments 上执行Array.filter 之类的操作并保持它不动？
理想情况下创建一个正在编辑的副本，然后改为编辑副本。这样，您可以轻松地丢弃更改，并且更新不会干扰用户当前正在执行的操作。只有一个用户可以更新一条评论，对吧？
@ElodSzopos 基本上只有一个用户，但是如果用户在多个终端上登录怎么办？（在这种情况下，我打算让终端独立，我的意思是，我不在乎用户是否从两个终端编辑评论）
@ElodSzopos 很抱歉没有接受您的回答（我太忙了，忘了）。我解决了这个问题，你的建议对我帮助很大。我现在接受它。

标签： reactjs websocket state

【解决方案1】：

从 cmets 中的简短对话得出结论-无论如何，我相信最好的方法是在用户打开评论后将评论的副本单独保存在状态树中的某处（可能是 currentlyEditing 或类似的东西）待编辑。

然后用户可以改为编辑副本，您可以尽可能保持后面的逻辑完整。

如果用户提交，请使用特定的comment_id 保存评论的更改。

展望未来，您可以选择引入edited_timestamp 以确保并发更新不会相互覆盖，并在用户没有最新更改并想要保存编辑时显示警告。

通过这种方式，您将不断更新，用户流程和体验不会受到干扰，并且您将设法尽可能多地重复使用您的代码，同时仍然获得能够放弃编辑的宽大和舒适单击按钮即可更改，无需担心副作用。

您经常可以在论坛和论坛上看到类似的行为和用户体验。或博客，与您的用例非常相似。

【讨论】：