Question

我试图在我的数据中的特定点添加一个对象＆＃39;这个组件状态的数组。以下不起作用，阵列只是清空。

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

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

3 个答案: