从数组中删除错误项

Question

我有一个组件，它包含一个处于状态的项数组，但是每当我试图删除一个项目时，错误的一个就会被删除。

下面是我的父组件的简化版本：

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类只显示Bank，当按下其中的"remove“按钮时，它将使用提供的id调用onChange。我已经验证了正确的索引被传递到removeBank中。但是，在removeBank执行后，当我选择第一个项(索引0)时，最后一个项(索引1)将从bank数组中删除。我在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)})

所有这些都没有奏效，它们都表现出了相同的行为。我在这件事上束手无策，任何建议都会受到极大的感谢！

Answer 1

根据文档

如果项的顺序可能发生变化，则不建议对键使用索引。这可能会对性能产生负面影响，并可能导致组件状态问题。请查看罗宾·波科尼的文章，以获得关于使用索引作为关键的负面影响的深入说明。如果选择不为列表项分配显式键，则将默认使用索引作为键。

使用一个稳定的ID，并使用它从数组中删除元素，应该可以解决您的问题。