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

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)将从库数组中删除.我在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

根据文件:

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

使用稳定的ID,并使用它来从阵列中删除元素,应该可以解决您的问题.