Question

我的博客上有一个评论系统。事情是评论通过WebSockets实时更新。当评论更新时，所有者当然必须能够编辑他们的评论。我想启用就地编辑（这意味着注释将替换为文本框和保存/放弃按钮）。我的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以确保并发更新不会相互覆盖，并在用户未进行最新更改并希望保存时显示警告编辑。

通过这种方式，您可以保持更新，用户流程和体验不会中断，您将尽可能多地重复使用代码，同时仍然可以放弃编辑的宽大和舒适点击按钮即可改变，而不必担心副作用。

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

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

1 个答案: