從陣列中刪除了錯誤的項目

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類僅顯示銀行，當按下其中的“刪除”按鈕時，它將使用提供的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)})

這些都不起作用，它們都表現出相同的行為。 我為此竭盡全力，任何建議將不勝感激！

Answer 1

根據文檔 ：

如果項目的順序可能更改，我們不建議對索引使用索引。 這可能會對性能產生負面影響，並可能導致組件狀態出現問題。 查閱Robin Pokorny的文章 ，深入了解使用索引作為鍵的負面影響。 如果您選擇不為列表項分配顯式鍵，那么React將默認使用索引作為鍵。

使用穩定的ID，並使用該ID從數組中刪除元素，應該可以解決您的問題。