将对象插入到 React 中特定索引处的数组中答案

【问题标题】：Insert object into array at specific index in React将对象插入到 React 中特定索引处的数组中
【发布时间】：2017-07-17 14:54:18
【问题描述】：

我正在尝试在我的“数据”数组中的特定点添加一个对象，这是组件状态。以下不起作用，数组只是被清空。

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 会导致问题。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

我相信这应该可以满足您的需求。

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

此函数返回一个新数组，其中插入了一个新项目。它不会改变你的原始数组，因此可以很好地处理组件的状态和 Redux。

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

【讨论】：

我认为这个答案应该被接受

【解决方案2】：

splice 返回拼接的项目（因为你拼接了 0 个项目，所以它是空的）并改变原始数组。

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

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

this.setState({
    data: newData
});

【讨论】：

splice 会改变状态，这通常是一种不好的做法
@Valentin 我在拼接之前添加了切片 :)
到目前为止，这是唯一能真正解释为什么 OP 的代码不起作用的答案。
这正是我所追求的。谢谢@YuryTarabanko

【解决方案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);

【讨论】：