ReactJSコンポーネントが間違った順序をレンダリングします -- reactjs フィールド と lodash フィールド と pouchdb フィールド と dragula フィールド 関連 問題

ReactJS components rendering wrong order












3
vote

問題

日本語

この質問は少し長い巻き掛けられていますが、私はあなたに何が起こっているのか正確に理解してほしいです...

私は私達の会社のためにタスクマネージャのデスクトップアプリを構築しています(電子)。奇妙な行動が発生しました。タスクマネージャは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から更新された)からタスクを取得し、必要なものを除外する:

<事前> <コード> var tasks = this.props.tasks.filter(function(task) { if(task.archive !== 1) { return true } });

その後、(LodSh.jsを使用して)順番を上記の注文番号でソートし、ソートされたデータを反応コンポーネントにマップします。

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

素晴らしい、私の仕事は順番にレンダリングされ、すべてが見栄えがよくなっています。

今、問題...

ドラッグアンドドロップして ["1", "2", "3", "4"] から<コード> 99887664 に並べ替えるときは、実際に ["3", "4", "1", "2"] を取得します。タスクは移動して更新します(上記のDragula / PouchDBコードのため)。 Weird ...私はDev Tools location.reload() と私の驚くべきことに、タスクは最初に求められていました:<コード> ["4", "1", "2", "3"]

再試行して、タスクを ["1", "2", "3", "4"] から<コード> ["1", "3", "2", "4"] に移動します。タスクは var tasks = this.props.tasks.filter(function(task) { if(task.archive !== 1) { return true } }); 0 にリセットします。 var tasks = this.props.tasks.filter(function(task) { if(task.archive !== 1) { return true } }); 1 とタスクは注文されています。 var tasks = this.props.tasks.filter(function(task) { if(task.archive !== 1) { return true } }); 2

これをデバッグしようとしている場合は、 var tasks = this.props.tasks.filter(function(task) { if(task.archive !== 1) { return true } }); 3 機能を無効にすると、タスクはドロップされた後に置いたままになります(それらは始めて順不成があります)。タスクは希望の場所に移動し、希望の注文番号を持ちます。

PouchDB var tasks = this.props.tasks.filter(function(task) { if(task.archive !== 1) { return true } }); 4 を無効にし、 998877615 の作業を維持すると機能しますが、データはサーバーに書き込まれません。そして、注文番号は結果として更新されません。

おそらく私は長すぎるためにコードを見つめてきましたが、タスクが跳ね返っている理由を理解することはできません。誰でもアイデアがありますか?

あなたの助けをありがとう!

英語

This question is a little long-winded but I want you to understand exactly what is occuring...

I'm building a task manager desktop app (Electron) for our company to use and I have a strange behavior occuring. The task manager is 6 columns (one for each employee) and contains a vertical list of tasks to be completed. It includes a drag and drop feature so you can sort the tasks.

I'm using Dragula to handle the drag and drop portion, then collect the ID number of all of the tasks, in order from top to bottom, storing them in an array.

I'm using PouchDB to update the database and sync the other running applications.

For the Dragula / PouchDB side I am using the following code:

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);       });     });   }  }); 

At this point, my TaskData now has a new "order" key, with the desired values. Now, I need to render the ReactJS Components -- in order.

Get tasks from props (refreshed from TaskData) and filter out what is needed:

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

I then sort the tasks by the above mentioned order number (using lodash.js) and map the sorted data to React Components:

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

Great, my tasks are rendered in order and everything is looking good.

Now, the problem...

When I drag and drop to re-order my tasks from ["1", "2", "3", "4"] to ["4", "1", "2", "3"], I actually get ["3", "4", "1", "2"]. The tasks move and update (because of the Dragula / PouchDB code above). Weird... I type in the Dev Tools location.reload() and to my suprise, the tasks are now ordered as I initially wanted: ["4", "1", "2", "3"].

Trying again, I move the tasks from ["1", "2", "3", "4"] to ["1", "3", "2", "4"], the tasks reset back to ["1", "2", "3", "4"]. Again, location.reload() and the tasks are now ordered: ["1", "3", "2", "4"].

In trying to debug this, I found that if I disable the _.sortBy function, the tasks stay put after being dropped (although they are out of order to begin with). The tasks move to their desired location and have the desired order number.

I've also found that if I disable the PouchDB .put(), and keep the _.sortBy working, it also works, but the data is not written to the server, and the order number does not update as a result.

Perhaps I have just been staring at the code for too long, but I cannot figure out why the tasks are bouncing around. Anyone have any ideas?

Thanks for your help!

</div
           
         
         

回答リスト

0
 
vote

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/ < / a>

このリンク。私が私の問題を解決するのを助けました、 @dmitri zaitsev's 答えを参照してください。

ハッピーコーディング=)

 

I managed to get mine working by implementing uuid. Heres a snippet below:

// 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> 

Check these notes for some more about the implementation. https://survivejs.com/react/getting-started/implementing-notes/

kudos to @Alf for this link. Helped me solve my issue, see @Dmitri Zaitsev's answer.

Happy coding =)

</div
 
 

関連する質問

1  NG2 - ドラゴラの一方向ドラッグ&リミットバッグ内の要素の数  ( Ng2 dragula one way drag limit number of elements in a bag ) 
プロジェクトに問題があります。 現在、イオンを備えたモバイルアプリに取り組んでいます。このアプリでは、ホームページに表示するウィジェットのリストを選択します。 使用したいウィジェットを選択したら、編成されているレイアウトを変更できます。これは私が現在作業中の部...

5  Dragulaを使用して行を空のテーブルにドラッグします  ( Drag row into empty table using dragula ) 
実際にはDragula(Angular-Dragulaを使って)1つのテーブルから別のテーブルにドラッグしようとしています。両方のテーブルに行が行がある場合、問題はありませんが、ターゲットテーブルが空になる場合があります。空のテーブルをドロップできるようにする...

8  ドラゴラはドラッグされたものより異なる要素を落とします  ( Dragula dropping a different element than dragged ) 
ドラゴラでは、1つのコンテナから別の方法への潜在的なコピーがあります - 要素を表すシンボルをコンテナにドラッグし、「本当の取引」を生成させてください。任意の異なる要素。 これのほとんどは本当に簡単でした: <コード> dragula([].slic...

2  ドラグラのドロップでのイベントをドロップでトリガーする方法?  ( How to trigger events on drop with dragula on drop ) 
反応して反応してReact-Dragulaモジュールを使用しています。簡単な説明の目的で、私は基本的にトレッロクローンを作ります。 「AppItem / Card」が1つのDragulaコンテナから別のDragulaコンテナ(「フェーズ」)に移動すると、DB内...

1  NG2-Dragula新しい項目を追加した後、最上部に表示されます  ( Ng2 dragula after adding new item its getting displayed at the top ) 
ドラッグアンドドロップ機能にはNG2-Dragulaを使用しています。最初の要素(または任意の要素)を最後にドラッグアンドドロップしてから、AddNewitemボタンを使用して新しいアイテムをアレイに追加しようとすると、新しい項目が最後に追加されていません。要...

2  Dragulaで並べ替えるときにオブジェクト属性を保持する方法  ( How to retain object attributes when re ordering with dragula ) 
以下のコードは、APIエンドポイントから色のリストを取得する単純なコンポーネント用です。その後、ユーザーは左のコンテナと右のコンテナの間で色をドラッグできます。 componentDidMount Lifecycleメソッドでは、コンポーネントはAPIから...

0  Laravelアプリのために複数のコンテナにDragula.jsを実装するのですか?  ( How do i implement dragula js for multiple containers for my laravel app ) 
私の質問は私のLaravelアプリにDragulaライブラリを実装することと関係があります。 私は仕事にドラゴラを持っていますが、それは「チーム」オブジェクトでのみ機能します。各チームオブジェクトがNametag DIVを受け入れるループを作成しようとしていま...

6  Angular2でHTML要素でモデルを取得します  ( Get model by html element in angular2 ) 
angular2のHTML要素によってモデルにアクセスする必要があります。私の場合、私はNG2-Dragulaを使ってドラッグアンドドロップを実行し、そのサービスはドラッグされたHTML要素にのみアクセスできます。そして私は要素の対応するモデルを更新する必要...

3  NG2-Dragulaを使用してアイテムのリストを注文してください  ( Order a list of items with ng2 dragula ) 
ループ内の項目のリストがあります。配列には最大6項目があります。 <事前> <コード> <div *ngFor="let item of items; let i=index"> <item-detail [item]="item" [dragula]='"f...

1  ドラッラルを使用してコンテナをドラッグアンドドロップした後のDIVのポジションを取得する  ( Get positions of divs after drag and drop in a container using dragula ) 
私はAngularyjsの初心者です。コンテナ内のそれぞれのDIVのドラッグとドロップが完了した後に、ポジションの変更を取得しようとしています。 私は彼らのウェブサイトで与えられたいくつかのコードスニペットを試しましたが、解決策を見つけることができませんでした...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有