插入對象到數組中的特定索引在React

我正試圖添加一個對象在我的'數據'數組是這個組件狀態的特定點。以下操作不起作用，數組只是被清空。插入對象到數組中的特定索引在React

addNewBulletAfterActive =() => { 
    const array = this.state.data; 
    const newBulletPoint = { 
     id: this.state.data.length += 1, 
     title: 'Click to add' 
    }; 
    const newData = array.splice(this.state.activeBulletPointId, 0, newBulletPoint); 
    this.setState({ 
     data: newData 
    }); 
}

的想法是，如果我有10個要點的列表，用戶可以在4個項目符號點單擊，然後按回車後直接添加一個新的點。我沒有任何問題添加項到數組的末尾，但它看起來像.splice導致問題。

來源

2017-07-17 GuerillaRadio

splice返回拼接項目（自拼接0項目以來是空的）並且改變原始數組。

const newData = array.slice(0); // copy 

newData.splice(this.state.activeBulletPointId, 0, newBulletPoint); 

this.setState({ 
    data: newData 
});

來源

2017-07-17 14:59:57

'splice'會改變狀態，這通常是一個不好的做法 – Valentin

@Valentin我已經在拼接之前添加了切片:) –

到目前爲止，這是唯一的答案，實際解釋了爲什麼OP的代碼不起作用。 –

我相信這應該做你以後的事情。

function addAfter(array, index, newItem) { 
    return [ 
     ...array.slice(0, index), 
     newItem, 
     ...array.slice(index) 
    ]; 
}

該函數返回一個新數組，其中插入一個新項目。它不會改變你的原始數組，因此可以很好地與組件的狀態和Redux一起玩。

然後，您可以將此功能的輸出分配給您的狀態。

來源

2017-07-17 15:01:05 Aron

插入對象到數組中的特定索引在React

回答

相關問題