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

Question

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

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

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

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

我得到组件 <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,
} );

就是这样。谢谢！

Answer 1

从评论中的简短对话得出结论 - 无论如何，我认为最好的方法是在状态树中的某个地方单独保存评论的副本（可能 currentlyEditing 或类似的东西）一次用户打开它进行编辑。

然后用户就可以编辑文案了，你可以尽量保持后面的逻辑完整。

如果用户提交，则保存对具有特定 comment_id 的评论的评论更改。

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

这样您就可以保持更新，用户流程和体验不应该受到干扰，您将设法重用尽可能多的代码，同时仍然获得能够宽容和舒适单击按钮即可放弃已编辑的更改，无需担心副作用。

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

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

Stop the live updates while user is editing comment?

state

websocket

reactjs