Javascript 从数组中删除了错误的项

我有一个组件，其中包含一个处于其状态的项数组，但每当我尝试删除一个项时，就会删除错误的项

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

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>
        )
    }
}

尝试了直接过滤：

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)})

尝试了深度复制和拼接：

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)})

这些都不起作用，它们都表现出相同的行为。我对此束手无策，任何建议都将不胜感激

根据：

如果项的顺序可能发生变化，我们不建议对键使用索引。这可能会对性能产生负面影响，并可能导致组件状态出现问题。查看有关使用索引作为键的负面影响的深入解释。如果您选择不为列表项分配显式键，则React将默认使用索引作为键

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

根据：

如果项的顺序可能发生变化，我们不建议对键使用索引。这可能会对性能产生负面影响，并可能导致组件状态出现问题。查看有关使用索引作为键的负面影响的深入解释。如果您选择不为列表项分配显式键，则React将默认使用索引作为键

---

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

尽量不要使用索引，因为在添加/删除项目时，索引会发生移动，这会导致react不重新提交某些元素。为银行分配一个实际ID，并将其用作密钥。基于该键添加/删除。尽量不要使用索引，因为在添加/删除项目时，索引将发生移动，从而导致react不会重新呈现某些元素。为银行分配一个实际ID，并将其用作密钥。根据该键添加/删除。非常感谢！！我将密钥设置为bank.name，这就解决了问题。只需确保两个银行不能有相同的名称@Ryanzy谢谢！！我将密钥设置为bank.name，解决了这个问题。只需确保两个银行不能有相同的名称@RyanZ即可