在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个要点并按下回车键直接在其后添加一个新的要点。 我没有遇到任何将项添加到数组末尾的问题，但看起来.splice会引起问题。

- GuerillaRadio

Answer 1

我相信这应该能够满足你的要求。

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

这个函数返回一个新数组，在其中插入一个新项。它不会改变你的原始数组，因此可以很好地与组件状态和Redux配合使用。

然后，您可以将此函数的输出分配给您的状态。

- Aron

---

我认为这个答案应该被接受。 - Sinan Yaman

Answer 2

splice 返回被切掉的元素（如果没有元素被切掉则返回空数组），并且会改变原始数组。

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

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

this.setState({
    data: newData
});

- Yury Tarabanko

---

“splice”操作会改变状态，这通常是不好的实践。 - Valentin

@Valentin 我已经在 splice 之前添加了 slice :) - Yury Tarabanko

到目前为止，这是唯一一个解释为什么原帖中的代码没有起作用的答案。 - Jon B

这正是我想要的。谢谢@YuryTarabanko - GuerillaRadio

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

- Edmond Sylar