react.js - React删除list中的某一项然后重新渲染页面？

问题描述

问 题

从后端获取了一个ajaxList列表，结构大致如下：

ajaxList = [
    {name: 'aa', id: 1},
    {name: 'bb', id: 2},
    {name: 'cc', id: 3},
]

// 渲染页面
this.setState({
    list: ajaxList
})

渲染页面之后，每个列表项有个删除按钮，点击删除按钮，则此列表项从页面上消失。
我目前的思路是：

this.state.list.splice(pos, 1)
this.setState({
    list: this.state.list
})

此时，假如我删除了{name: 'bb', id: 2}这一项，我怎么更新list数组呢？也就是说怎么找{name: 'bb', id: 2}在list数组中的位置。

这是我的思路，可能不是太好，请大神指教，谢谢！

解决方案

redux来更新status是最好的。

不用也是可以，list新增字段status，页面判断status === delete时候不显示，点击按钮时候根据你map循环时候的index修改对应state list即可

//看到下方的index了吗？把这个index放到你的按钮触发的事件里去，这个index就是你的点击的当前行在数据里的下标
list.map((item, index) => ....)
//然后修改对应state里的内容即可

这篇关于react.js - React删除list中的某一项然后重新渲染页面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！