从阵列中删除错误的项目

我有一个包含其状态的项目的数组一个组成部分，但每当我试图删除的项，错一个被删除。

这里是我的父Component的简化版本：

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类简单地显示了银行，并在“删除”按钮，里面被按下时，它会调用的onChange与所提供的ID。我已经验证了右手食指被传递到removeBank。但是，removeBank执行后，最后一个项目（索引1）从银行数组中删除，当我所选择的第一个（索引0）。我曾尝试在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)})

这些都没有工作过，他们都表现出相同的行为。我在我的智慧就这样结束了，任何建议将非常感激！

按照docs：

我们不建议使用索引键，如果项目的顺序可能会改变。这对性能产生负面影响，并可能导致组件状态的问题。退房Robin Pokorny’s article有关使用一个索引作为一个重要的负面影响进行了深入的解释。如果您选择不指定明确的键列出的项目随即反应过来将默认使用索引作为键。

使用稳定的ID，并用它来删除数组元素，应该解决您的问题。

从阵列中删除错误的项目

我有一个包含其状态的项目的数组一个组成部分，但每当我试图删除的项，错一个被删除。

这里是我的父Component的简化版本：

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类简单地显示了银行，并在“删除”按钮，里面被按下时，它会调用的onChange与所提供的ID。我已经验证了右手食指被传递到removeBank。但是，removeBank执行后，最后一个项目（索引1）从银行数组中删除，当我所选择的第一个（索引0）。我曾尝试在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)})

这些都没有工作过，他们都表现出相同的行为。我在我的智慧就这样结束了，任何建议将非常感激！

按照docs：

我们不建议使用索引键，如果项目的顺序可能会改变。这对性能产生负面影响，并可能导致组件状态的问题。退房Robin Pokorny’s article有关使用一个索引作为一个重要的负面影响进行了深入的解释。如果您选择不指定明确的键列出的项目随即反应过来将默认使用索引作为键。

使用稳定的ID，并用它来删除数组元素，应该解决您的问题。