3

この質問は少し長文ですが、何が起こっているのかを正確に理解してほしい...

会社で使用するタスク マネージャー デスクトップ アプリ ( Electron ) を構築していますが、奇妙な動作が発生しています。タスク マネージャーは 6 つの列 (従業員ごとに 1 つ) で構成され、完了すべきタスクの垂直リストが含まれています。タスクを並べ替えることができるように、ドラッグ アンド ドロップ機能が含まれています。

Dragulaを使用してドラッグ アンド ドロップ部分を処理し、すべてのタスクの ID 番号を上から順に収集して配列に格納しています。

PouchDBを使用してデータベースを更新し、実行中の他のアプリケーションを同期しています。

Dragula / PouchDB 側では、次のコードを使用しています。

var containers = [];
containers.push(ReactDOM.findDOMNode(this.refs.taskContainer));

var drake = Dragula(containers);
drake.on('drop', function(el, target, source, sibling) {

  // Get Desired Order of IDs
  for(i = 0; i < source.children.length; i++) {
    ids.push(source.children[i].id);
  }

  // Loop through IDs, write an "order" to tasks in PouchDB Database ("TaskData").
  // TaskData's replication is "live" so it automatically syncs to the DB.
  for(i = 0; i < ids.length; i++) {
    TaskData.get(ids[i]).then(function(doc) {   
      doc.order = ids.indexOf(doc._id);
      TaskData.put(doc).catch(function(err) {
        console.log(err);
      });
    });
  }

});

この時点で、私の TaskData には、目的の値を持つ新しい「注文」キーが含まれています。次に、ReactJS コンポーネントを順番にレンダリングする必要があります。

(TaskData から更新された) props からタスクを取得し、必要なものを除外します。

var tasks = this.props.tasks.filter(function(task) {
  if(task.archive !== 1) {
    return true
  }
});

次に、上記の順序番号で (lodash.js を使用して) タスクを並べ替え、並べ替えられたデータを React コンポーネントにマップします。

tasks = _.sortBy(tasks, 'order').map(function(task) {
  return <Task key={task.id} order={task.order} ...more props />
});

私のタスクは順番にレンダリングされ、すべてがうまくいっています。

さて、問題は...

["1", "2", "3", "4"]ドラッグ アンド ドロップしてタスクを からに並べ替えると["4", "1", "2", "3"]、実際には が表示されます["3", "4", "1", "2"]。タスクは移動および更新されます (上記の Dragula / PouchDB コードのため)。奇妙な... Dev Toolslocation.reload()と入力すると、驚いたことに、タスクが最初に望んでいた順序になっています["4", "1", "2", "3"]。

再試行して、タスクを から に移動する["1", "2", "3", "4"]と["1", "3", "2", "4"]、タスクは にリセットされ["1", "2", "3", "4"]ます。繰り返しlocation.reload()ますが、タスクは次のように並べられています: ["1", "3", "2", "4"].

これをデバッグしようとすると、機能を無効にする_.sortByと、ドロップされた後もタスクが置かれたままになることがわかりました (最初は順不同ですが)。タスクは目的の場所に移動し、目的の順序番号が付けられます。

また、 PouchDB を無効にして動作.put()を続け_.sortByても動作しますが、データがサーバーに書き込まれず、結果として注文番号が更新されないこともわかりました。

おそらく私はあまりにも長い間コードを見つめていたのでしょうが、なぜタスクが跳ね回っているのか理解できません。誰にもアイデアはありますか？

ご協力いただきありがとうございます！

4

1 に答える 1

0

を実装することで、なんとか機能させることができましたuuid。以下にスニペットを示します。

// Import the code
import uuid from 'uuid';

// My dummy component
<Messages>
  <ul>
    {messages.map(({ value, signature }) => (
      <Message 
        value={value}
        key={uuid.v4()} // use the uuid as the unique key
        from={signature}
        onMessageRecieved={this.handleMessageRecieved} />
    ))}
  </ul>
</Messages>

実装の詳細については、これらのメモを確認してください。 https://survivejs.com/react/getting-started/implementing-notes/

このリンクの@Alfに称賛を。問題の解決に役立ちました。 @Dmitri Zaitsevの回答を参照してください。

幸せなコーディング =)

于 2020-05-14T00:49:51.920 に答える