我有一个组件,其中包含一个处于其状态的项数组,但每当我尝试删除一个项时,就会删除错误的项。
以下是我的父组件的简化版本:
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类只是显示银行,当按下其中的“remove”按钮时,它将使用提供的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)})
这些都不起作用,它们都表现出相同的行为。我对此束手无策,任何建议都将不胜感激!