在React中的特定索引处将对象插入数组

Question

我正在尝试在我的'data'数组中的特定点添加一个对象,这是该组件状态.以下不起作用,数组只是被清空.

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