React.js - フロントエンドでArray.unshift（）の配列を更新しない

Question

react-dndを使用してドラッグアンドドロップの小さな実装があります。 2つの列があり、右側の列から左側にドラッグすると、特定のステータス項目がアクティブになります。

ドロップ時に、pushCard()が呼び出されます（名前が示唆するように）、ドラッグされた項目を有効化されたステータスの配列、つまりstatus_dataにプッシュします。

しかし、問題はstatus_data.push(itemToPush)で、配列の最後に新しい項目をプッシュします。私は、配列の上にアイテムをプッシュする、つまり配列のインデックス0を挿入したかったのです。この場合

status_data.unshift(itemToPush)作品が、unshiftはstateにし、バックエンドでの配列を更新しますが、それはフロントエンドに更新arrayが表示されません。むしろ最初にドラッグされたのと同じ要素を押し続けるだけです。

Simple description of problem in a GIF.

pushCard：

pushCard(item) { 
    const { status_data } = this.state.template; 
    const itemToPush = { 
     title : item.title || 'CUSTOM', 
     type_id : item.type_id, 
     color : item.color || '#000', 
     type: item.type, 
     require_notes: item.require_notes || false, 
     require_estimate: item.require_estimate || false 
    }; 
    status_data.unshift(itemToPush); 
    this.setState(Object.assign(this.state.template, { status_data })); 
} 

renderActiveStatuses

renderActiveStatuses() { 
    let renderedResult = ''; 
    if (this.state.template.status_data.length < 0) { 
     renderedResult = (<p>No status active in this template.</p>); 
    } else { 
     renderedResult = this.state.template.status_data.map((status, i) => { 
     return (
      <Status deleteStatus={this.deleteStatus} handleStatusUpdate={this.onStatusUpdate} index={i} id={status.id} moveCard={this.moveCard} statusData={status} key={status.id} /> 
     ); 
     }); 
    } 
    return renderedResult; 
} 

renderActiveStatuses成分のrender関数で呼び出されます。

Answer 1

statusオブジェクトとなり、 itemToPushここに表示されているプロパティはidで、keyとして使用しているものはStatusです。あなたは代わりにkey={i}を試すことができます（マップインデックスを使用することが最良の考えではない場合でも）。

const itemToPush = { 
    id: Math.random().toString(36).substr(2, 16), 
    ... 
} 

をし、あなたが前に行ったように、今status.idを使用します。

あなたは、このような（おそらく）ユニークなIDを生成することができます。

これらの数百万を生成するリスクがある場合は、より良いIDジェネレータがあります。

Answer 2

この点についてはどうですか？あなたがあなたの質問に行ったように

this.setState({template: Object.assign({}, this.state.template, { status_data })}); 

オリジナルのものは変化しない一方で、あなただけの、あなたの状態にの内容を割り当てているので、あなたの状態は次のように、

state = { 
    template: {status_data: ...}, 
    status_data: ..., 
    ... 
}