Javascript 在React.js中逐个删除数组中的多个元素

我正在尝试使用传入索引的拼接来删除数组的元素

handleClick(index) {
    const array = ['el1', 'el2', 'el3', 'el4'];   
    array.splice(index, 1);
    this.setState({ data: array });          
}

---

它工作得很好，但结果是每次我为了删除多个元素而触发handleClick时，我都从常量数组的同一点开始。我需要做的是首先在不使用一个元素的情况下保存数组，当触发另一个handleClick时，它将在较小的数组上工作，即只包含三个元素，只生成两个元素等。我如何实现这一点？谢谢

您可以将

数据

数组保持在组件状态，并在

handleClick

方法中使用

setState

和一个新数组，该数组是

数据

的副本，该数组已删除索引为

index

的元素

您可以在

componentDidMount

中从后端获取数据，并在请求完成时将其置于状态

示例

函数getData（）{ 返回新承诺（解决=>{ 设置超时（（）=>{ 解决（[“el1”、“el2”、“el3”、“el4”）； }, 1000); }); } 类应用程序扩展了React.Component{ 状态={data:[]}； componentDidMount（）{ getData（）。然后（数据=>{ this.setState（{data}）； }); } handleClick（索引）{ this.setState（prevState=>{ const data=[…prevState.data]； 数据拼接（索引1）； 返回{data}； }); } render（）{ 返回( {this.state.data.map（（el，index）=>( this.handleClick（索引）}> {el} ))} ); } } render（，document.getElementById（“根”））

将数组存储在状态而不是单击处理程序中的变量中。那么您只有一个itI实例，我忘了提到我的阵列来自后端服务器，因此它还不能在构造函数生命周期内使用。对不起。。。