React.js-Array.unshift（）不更新前端的數組

Question

我有一個使用react-dnd拖放的小實現。 有兩列，從右側列拖到左側列會激活特定狀態項。

一經調用， pushCard()被調用，顧名思義， pushCard()將拖動的項目推入已激活狀態的數組，即status_data 。

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

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

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

在組件的render函數中調用renderActiveStatuses 。

Answer 1

那這個呢？

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

就像您在問題中所做的那樣，您只將this.state.template的內容分配給您的狀態，而原始狀態從未更改，因此您的狀態變為

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

Answer 2

status對象（如您在此處顯示的itemToPush沒有屬性id ，即您用作Status的key屬性id 。 您可以改用key={i} （即使使用map索引不是最佳方法）。

您可以生成一個（可能）唯一的ID，如下所示：

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

並像以前一樣使用status.id 。

如果生成數百萬個ID生成器存在任何風險，則有更好的ID生成器。