P10:数组传递下标，删除数组数据

深藏阁楼爱情的钟 2023-10-06 20:46 19阅读 0赞

#### React16 基础 ####

*  阐述
 *  数组下标的传递
 *  编写 deleteItem 方法
 *  正式删除数据

## 阐述 ##

添加服务虽然很美好，但是有时候也需要有些节制。

本文就学习如何删除一个服务选项。

需求是这样的，当点击已经有的选项后，我们就进行删除。

如果使用原生的js来写，这是非常麻烦的，但是有了`React`后就变的简单了。

## 数组下标的传递 ##

如果要删除一个东西，就要得到数组里的一个编号，这里指下标。  
传递下标就要有事件产生，先来绑定一个双击事件，代码如下:

<ul>
        {
            this.state.list.map((item,index)=>{
                return (
                    <li 
                        key={index+item}
                        onClick={this.deleteItem.bind(this,index)}
                    >
                        {item}
                    </li>
                )
            })
        }
    </ul>

为了看着更清晰，我们在 `return` 部分加了 `()` 这要就可以换行编写JSX代码了，在 `onClick`我们绑定了 `deleteItem` 方法。

## 编写 deleteItem 方法 ##

绑定做好了,现在需要把 `deleteItem`,在代码的最下方,加入下面的代码。  
方法接受一个参数 `index`：

//删除单项服务
    deleteItem(index){
        
        console.log(index)
    }

这时候可以预览一下啊,已经在方法里获取到了下标。

![在这里插入图片描述][9fa030f1b15c4226a6356a71cc918e88.gif_pic_center]

## 正式删除数据 ##

获得了数据下标后，删除数据就变的容易起来。

先声明一个局部变量，然后利用传递过来的下标，删除数组中的值，删除后用 `setState` 更新数据就可以了。

代码如下：

//删除单项服务
    deleteItem(index){
        
        let list = this.state.list
        list.splice(index,1)
        this.setState({
        
            list:list
        })
    
    }

效果如下：

![在这里插入图片描述][f92b4e92bbec4925a41d987e7745b627.gif_pic_center]  
其实这里边是有一个坑的，有的小伙伴肯定会认为下面的代码也是正确的。

//删除单项服务
    deleteItem(index){
        
        this.state.list.splice(index,1)
        this.setState({
        
            list:this.state.list
        }) 
    }

**记住React是禁止直接操作 `state` 的，虽然上面的方法也管用，但是在后期的性能优化上会有很多麻烦，所以一定不要这样操作。**

这也算是我React初期踩的比较深的一个坑，希望小伙伴们可以跳坑。

[9fa030f1b15c4226a6356a71cc918e88.gif_pic_center]: https://img-blog.csdnimg.cn/9fa030f1b15c4226a6356a71cc918e88.gif#pic_center
[f92b4e92bbec4925a41d987e7745b627.gif_pic_center]: https://img-blog.csdnimg.cn/f92b4e92bbec4925a41d987e7745b627.gif#pic_center