如何从组件数组中删除特定元素？

Question

当我的代码执行删除元素时，最后一个数组元素将被删除，而不是我在代码中引用的特定索引。

任何对此进行审查的帮助都会有所帮助。

constructor(props) {
    super(props);
    this.state = {
        rows: []
    }
    this.addHandler = this.addHandler.bind(this);
    this.removeHandler = this.removeHandler.bind(this);
}
addHandler(event){
    const rows = this.state.rows.concat(<Component>);
    this.setState({
                    rows
    })
}

removeHandler(id){
    const index = id;
    this.setState({
        row: this.state.row.filter( (x, i) => i !== index) 

    })
}

render () {
    const rows = this.state.rows.map((Element, index) => {
        return <Element key={index} id={index} index={index} func1= 
        {this.addHandler} func2={this.removeHandler} />
    });
    // func2 gets called by child
    return (
            <div className="rows">

                <button onClick={this.addHandler} >+</button>

                {rows}
             </div>
    );
}

Answer 1

不要使用索引作为映射数组的键。签出这个易于使用的软件包，并完成工作uuid