代码之家  ›  专栏  ›  技术社区  ›  Ryan Z

从数组中删除了错误的项

  •  1
  • Ryan Z  · 技术社区  · 6 年前

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

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

    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类只是显示银行,当按下其中的“remove”按钮时,它将使用提供的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)})
    

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

    1 回复  |  直到 6 年前
        1
  •  7
  •   Blue    6 年前

    根据 docs :

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

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