我列出了哪些元素必须是可删除的(例如,使用删除按钮)。我如何从反应中意识到这一点?
这是我的状态:
state = {
infos: [
{
id: 1,
info: 'some info',
deleted: false
},
{
id: 2,
info: 'some info',
deleted: false
},
{
id: 3,
info: 'some info',
deleted: false
}
]
}
这是我尝试过的删除功能:
removeInfo() {
this.state.infos.splice(key, 0)
}
这是映射后得到的jsx代码:
{
this.state.infos.map((item, key) => {
return (
<ListItem key={item.key + key}>
<Icon color="gray" f7="home" />
<span className="text-black">{item.info}</span>
<Button><Icon f7="edit" color="#39b549" /></Button>
<Button onClick={this.removeInfo}><Icon color="black" f7="trash" /></Button>
</ListItem>
)
})
}
答案 0 :(得分:2)
您几乎不需要更改。
首先,我们需要将要删除的商品的ID传递给remove函数:
<Button onClick={()=>this.removeInfo(item.id)}><Icon color="black" f7="trash" /></Button>
然后,您需要使用setState
以不变的方式从数组中删除项目。
removeInfo(id) {
this.setState(ps=>({infos:ps.infos.filter(x=>x.id!=id)}))
}
splice
对数组进行突变。
答案 1 :(得分:1)
您需要使用setState并请注意,您无法对状态进行突变,因此您需要使用Spread运算符来创建新数组。
function removeInfo(index) {
this.setState((prev) => ({
infos: [...prev.infos.slice(0, index), ...prev.infos.slice(index+1)]
}))
}