ユーザーがコメントを編集中にライブアップデートを停止しますか？

Question

私は自分のブログにコメントシステムを持っています。コメントはWebSocketsを介してライブで更新されます。コメントは更新されますが、オーナーはコメントを編集できる必要があります。インプレース編集を有効にしたい（つまり、コメントはテキストボックスと保存/破棄ボタンに置​​き換えられる）。 My Reactアプリはソケットイベントに登録し、コンポーネント状態のcomments配列を変更します。これは、ユーザーがコメントを編集している間に新しいものが入った場合、編集が残酷に停止することを意味します。 1.ユーザがコメントを編集している間に、ライブアップデートを停止する（つまり、ソケットイベントを一時的に無視する）。 2.コメントを更新し続けますが、コメントはスクロールしたままにしておきます。編集者（私は対処方法がわかりません）

ユーザーがコメントを編集している間にライブアップデートを止めるのは馬鹿だと思うので、私はあなたに質問しています。コメントを更新していますか？

私のアプリケーションの構造についての詳細：私はstate配列commentsを含むコンポーネント<PostComments />を持って

を。その配列は、<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または何かsi milar）を作成して編集することができます。

次に、ユーザーはコピーを編集することができ、できるだけ背面のロジックをそのまま維持することができます。

ユーザーがコミットする場合は、コメントのコメントの変更を特定のcomment_idで保存します。

edited_timestampを導入して、並行更新によって上書きされないようにすることもできます。ユーザーに最新の変更がなく、編集を保存したい場合は警告を表示します。

このようにすれば、アップデートやユーザーフローとエクスペリエンスが損なわれることはなく、可能な限り多くのコードを再利用できるようになりますが、寛容さと快適性を捨てることができます副作用を心配することなく、ボタンをクリックするだけで編集内容を変更できます。

フォーラムや掲示板でよく似たような動作やユーザーエクスペリエンスを見ることができます。あるいは、あなたのユースケースに非常によく似ています。