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

Question

我試圖在我的“數據”數組中的特定點添加一個對象，這是這個組件狀態。 以下不起作用，數組只是被清空。

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 個要點並按 Enter 直接在后面添加一個新的要點。 我在將項目添加到數組末尾時沒有遇到任何問題，但它看起來像.splice 導致了問題。

Answer 1

我相信這應該做你所追求的。

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

此函數返回一個新數組，中間插入了一個新項。 它不會改變您的原始數組，因此可以很好地處理組件的狀態和 Redux。

然后，您可以將此函數的輸出分配給您的狀態。

Answer 2

splice返回拼接的項目（這是空的，因為你拼接了 0 個項目）並改變了原始數組。

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

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

this.setState({
    data: newData
});

Answer 3

我認為這可能是一種更簡單快捷的方法

 /*Just plain JS*/ function AddAfter(array, newObject){ array.unshift(newObject); } /*In react If updating state*/ var _prev = this.state.your_array; //getting the current value for the state object var newInfo = {id: 1, more: 'This is a new object'}; _prev.unshift(newInfo);