несколько экземпляров компонента, пытающегося удалить onclick - но всегда удаляется последний

Question

Вот упрощенный пример моего кода

 constructor(props) {
        super(props);
        this.state = {
            components:[ComponentA, ComponentA, ComponentA, ComponentA, ComponentA ]
        }
    }

 hide(i){
        let components= this.state.components.filter((item,k)=>k!=i);
        this.setState({components});
    }


 render() {
       return (<div>
            {this.state.components.map((item,i) => {
                    let ChildComponent = item;
                    return <div key={i} onClick={()=>this.hide(i)}>
                              <ChildComponent />
                           </div>
             })

 }

Здесь у меня есть экземпляры одного и того же компонента.Когда я нажимаю на одну - я ожидаю, что div с этим конкретным экземпляром будет удален.Чтобы проверить это - вот мой код ComponentA:

constructor(props) {
        super(props);
        this.state = {
             uid: Math.random()
        }
    }
    render() {
        return (
            <div>
                ComponentA - {this.state.uid}
            </div>
        );
    }

Таким образом, каждый экземпляр имеет свой уникальный uid в состоянии.Когда я нажимаю на один из компонентов, всегда последний удаляется.

---

ОБНОВЛЕНИЕ

Это была упрощенная версия, теперь она работает.Моя настоящая проблема была с реагированием на сетку:

this.state = {
            testlayout: [
                {"w": 10,"h": 100,"i": 0,"x": 0, "y": 0,"widget": Component4},
                {"w": 10,"h": 100,"i":1,"x": 10, "y": 0,"widget": Component4},
                {"w": 10,"h": 100,"i": 2,"x": 20, "y": 0,"widget": Component4},
            ]
        }

onClose(i){
        let testlayout = this.state.testlayout.filter((item,k)=>item.i!=i);
        this.setState({testlayout});
    }

render() {
            return (<div>
                    <ReactGridLayout>
                        {this.state.testlayout.map((item, i) => {
                                let ChildComponent = item.widget;
                                return 
                                <div onClick={() => this.onClose(item.i)}  data-grid={this.state.testlayout[i]} key={item.i}>
                                    <ChildComponent/>
                                </div>
                            }
                        )}

                    </ReactGridLayout>
                </div>
            );
        }

Answer 1

хорошо, эта строка кода удаляет последний элемент, так как индексы не будут сохранены.

let components= this.state.components.filter((item,k)=>k!=i);

Прежде всего, загляните в статью о Примирение .Это поможет вам понять, почему уникальные, предсказуемые и стабильные ключи важны.