组件的多个实例，试图删除 onclick - 但总是最后一个被删除答案

【问题标题】：multiple instances of the component, trying to remove onclick - but always the last one is being removed组件的多个实例，试图删除 onclick - 但总是最后一个被删除
【发布时间】：2018-06-04 14:43:10
【问题描述】：

这是我的代码的简化示例

 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 状态。当我点击其中一个组件时 - 总是最后一个被删除。

更新

那是简化版，现在可以使用了。我真正的问题是 react-grid-layout：

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>
            );
        }

【问题讨论】：

标签： javascript reactjs object react-component react-grid-layout

【解决方案1】：

好吧，这行代码删除了最后一个元素，因为不会保留索引。

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

首先，查看有关Reconcilation 的文章。它可以帮助您理解为什么唯一、可预测和稳定的密钥很重要。

【讨论】：

基本上它的要点是，这就是为什么你不应该在 React 中使用数组索引作为键。密钥用于唯一标识组件。因此，当您单击删除一个时，.map() 会创建另一个组件数组，但少了一个组件。然而，对于 React，它所注意到的是仍然有一堆带有键 0 to n-1 的 div，缺少“最后一个”，所以它从 DOM 中删除了它。它不知道实际删除的那个不是结尾，因为键只是数组索引。所以总是对组件数组使用唯一键。
我改变了 this.state = {components:[{w:Component4,i:0},{w:Component4,i:1},{w:Component4,i:2},{w :Component4,i:3},{w:Component4,i:4}]} 并由 i 删除
是的，这样就可以了。只要您还使用该i 作为键。