React.js - Array.unshift（）沒有更新前端陣列

我有一個小的執行拖放使用react-dnd。有兩列，從右欄拖動到左欄激活特定的狀態項。React.js - Array.unshift（）沒有更新前端陣列

在放置時，pushCard()被調用，其（如其名稱所示）將拖動的項目推入激活狀態的陣列，即status_data。

但問題是，status_data.push(itemToPush)，在陣列的末尾推新項目。我想推動數組頂部的項目，即數組的索引0。

status_data.unshift(itemToPush)在這種情況下工作，但unshift只更新數組中的state並在後端，但它並不顯示在前端的更新array。相反，它會繼續推動先被拖動的相同元素。

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功能。

來源

2017-10-20 Muhammad Arslan Aslam

的status對象，像itemToPush，你在這裏顯示，沒有財產id，你用作key在Status。您可以嘗試使用key={i}（即使使用地圖索引不是最好的主意）。

可以產生這樣的（可能）唯一ID：

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

，並使用status.id現在像之前。

如果在產生數百萬個這樣的情況下存在任何風險，那麼有更好的ID生成器。

來源

2017-10-20 11:37:16 JulienD

如果我做'key = {i}'，那會混淆「react-dnd」。因爲它需要一個獨特的'索引'爲每個項目。 –

「Status」的'id'也是錯誤的。你可以嘗試像'status.title + status.type_id + i'這樣的東西。否則，你將需要一個工廠來爲你的狀態項目生成一個隨機ID，即一個函數返回這些項目中的一個，給它的類型添加一個ID。 – JulienD

已更新爲ID生成器。 – JulienD

這是怎麼回事？

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

正如你在你的問題一樣，你只分配給你的狀態內容，而原來一個永遠不會改變，所以你的狀態變爲

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

來源

2017-10-20 11:09:47 JulienD

您可能需要'Object.assign（{}，this.state.template，{status_data}）'，以便[不直接修改狀態]（https://reactjs.org/docs/state-and- lifecycle.html＃do-not-modify-state-directly） –

確實，我更新了答案。 – JulienD

@JulienD謝謝。但是這並不能解決問題：9 –

React.js - Array.unshift（）沒有更新前端陣列

回答

相關問題