[英]Wrong item deleted from array
我有一个组件,该组件在其状态下包含一个项目数组,但是每当我尝试删除一个项目时,都会删除错误的项目。
这是我的父组件的简化版本:
export default class BankList extends Component {
state = {
banks: [new Bank("Name1"), new Bank("Name2")]
}
addBank() {
this.setState({banks: [...this.state.banks, new Bank("")]})
}
removeBank(index) {
let good = [];
this.state.banks.forEach((item, ind) => {
if(ind !== index){
good.push(item);
}
});
this.setState({banks: good});
}
render() {
return (
<Container>
<Content>
<List>
{this.state.banks.map((bank, index) => <BankContainer bank={bank} key={index} id={index} onRemove={() => this.removeBank(index)}/>)}
</List>
<Content>
<Right>
<Button onPress={() => this.addBank()}>
<Text>Add Bank</Text>
</Button>
</Right>
</Content>
</Content>
</Container>
)
}
}
BankContainer类仅显示银行,当按下其中的“删除”按钮时,它将使用提供的ID调用onChange。 我已验证正确的索引已传递到removeBank中。 但是,在执行removeBank之后,当我选择第一个项目(索引0)时,最后一个项目(索引1)将从banks数组中删除。 我在removeBank中尝试了以下方法主体,但无济于事:
尝试了浅表副本:
let old = [...this.state.banks];
old.filter((item, ind) => ind !== index);
this.setState({banks: old});
尝试了一个直过滤器:
this.setState({banks: this.state.banks.filter((item, ind) => ind !== index);
尝试了深拷贝:
let old = [...this.state.banks];
old = old.map(i => Object.assign({}, i));
old.filter((item, ind) => ind !== index);
this.setState({banks: old});
试了一个接头:
this.setState({banks: this.state.banks.splice(index, 1)});
尝试了浅拷贝和拼接:
let old = [...this.state.banks]
old = old.splice(index, 1);
this.setState({banks: old});
尝试了深层复制和拼接:
let old = [...this.state.banks];
old = old.map(i => Object.assign({}, i));
this.setState({banks: old.splice(index, 1)})
这些都不起作用,它们都表现出相同的行为。 我为此竭尽全力,任何建议将不胜感激!
根据文档 :
如果项目的顺序可能更改,我们不建议对索引使用索引。 这可能会对性能产生负面影响,并可能导致组件状态出现问题。 查阅Robin Pokorny的文章 ,深入了解使用索引作为键的负面影响。 如果您选择不为列表项分配显式键,那么React将默认使用索引作为键。
使用稳定的ID,并使用该ID从数组中删除元素,应该可以解决您的问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.