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

我正试图添加一个对象在我的'数据'数组是这个组件状态的特定点。以下操作不起作用，数组只是被清空。插入对象到数组中的特定索引在React

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

来源

2017-07-17 GuerillaRadio

splice返回拼接项目（自拼接0项目以来是空的）并且改变原始数组。

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

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

this.setState({ 
    data: newData 
});

来源

2017-07-17 14:59:57

'splice'会改变状态，这通常是一个不好的做法 – Valentin

@Valentin我已经在拼接之前添加了切片:) –

到目前为止，这是唯一的答案，实际解释了为什么OP的代码不起作用。 –

我相信这应该做你以后的事情。

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

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

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

来源

2017-07-17 15:01:05 Aron

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

回答

相关问题