javascript - 将对象插入到 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。

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