React子组件不会卸载（重新出现）

Question

我在React中遇到问题（下面提供的文件）。我正在尝试生成一组子组件，并希望能够删除它们。我有一个状态参数this.state.lipids，其中包含一个对象数组，使用这些参数我在<DataListCoupledInput />内生成了几个<RatioCoupledDataLists />组件。除了拒绝删除之外，组件都会生成并执行他们应该执行的操作。

当我通过this.state.lipids删除元素来改变我的removeLipid(index)数组时，它会触发重新渲染，因为某种原因，它会神奇地生成我刚删除的<DataListCoupledInput />组件。

我尝试将责任移至<RatioCoupledDataLists />的父级别，但问题仍然存在。

请帮帮我。

RatioCoupledDataLists.jsx

class RatioCoupledDataLists extends React.Component {
constructor(props) {
        super(props)

        this.state = {
            lipids: [{value: null, upperLeaf: 1, lowerLeaf: 1}]
        }

        this.registerLipid = this.registerLipid.bind(this);
        this.addLipid = this.addLipid.bind(this);
        this.removeLipid = this.removeLipid.bind(this);
    }

    registerLipid(index, lipid) {
        var lipids = [];
        lipids = lipids.concat(this.state.lipids);
        lipids[index] = lipid;
        this.setState({lipids: lipids});
        this.state.lipids[index] = lipid;
    }

    addLipid() {
        var mapping = {value: null, upperLeaf: 1, lowerLeaf: 1};
        this.setState({lipids: this.state.lipids.concat(mapping)});
    }

    removeLipid(index) {
        var lipids = [];
        lipids = lipids.concat(this.state.lipids);
        lipids.splice(index, 1);
        this.setState({lipids: lipids});
    }

    render() {

        var itemIsLast = function(index, len) {
            if (index + 1 === len) {
                // item is last
                return true;
            }
            return false;
        }

        var makeLipidSelects = function() {
            var allLipids = [];
            for (var i = 0; i < this.state.lipids.length; i++) {
                // Add RatioCoupledDataList
                allLipids.push(
                    <DataListCoupledInput 
                        fr={this.registerLipid} 
                        list="lipids"
                        description="Membrane lipids"
                        add={this.addLipid}
                        remove={this.removeLipid}
                        key={i}
                        id={i}
                        isFinal={itemIsLast(i, this.state.lipids.length)}
                        lipid={this.state.lipids[i]} />);
            }
            return allLipids;
        }
        makeLipidSelects = makeLipidSelects.bind(this);

        return  <div className="category">
                    <div className="title">Custom Membrane</div>
                    <DataList data={lipids} id="lipids" />
                    {makeLipidSelects()}
                </div>
    }
}

DataListCoupledInput.jsx

class DataListCoupledInput extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            value: this.props.lipid.value,
            active: this.props.isFinal,
            upperLeaf: this.props.lipid.upperLeaf,
            lowerLeaf: this.props.lipid.lowerLeaf
        }

        this.handleChange = this.handleChange.bind(this);
        this.registerLeafletValue = this.registerLeafletValue.bind(this);
        this.registerLipid = this.registerLipid.bind(this);

    }

    registerLipid(lipid) {
        this.props.fr(this.props.id, lipid);
    }

    handleChange(event) {
        this.registerLipid({value: event.target.value, upperLeaf: this.state.upperLeaf, lowerLeaf: this.state.lowerLeaf});
        this.setState({value: event.target.value});
    }
    registerLeafletValue(leaflet) {
        if (leaflet.name === "upperRatio") {
            this.registerLipid({value: this.state.value, upperLeaf: leaflet.value, lowerLeaf: this.state.lowerLeaf});
            this.setState({upperLeaf: leaflet.value});
        }
        if (leaflet.name === "lowerRatio") {
            this.registerLipid({value: this.state.value, upperLeaf: this.state.upperLeaf, lowerLeaf: leaflet.value});
            this.setState({lowerLeaf: leaflet.value});
        }
    }

    render() {

        var canEdit = function() {
            if (this.props.isFinal === true) {
                return <input onBlur={this.handleChange} list={this.props.list} />;
            } else {
                return <div className="description">{this.state.value}</div>
            }
        }
        canEdit = canEdit.bind(this);

        var addOrRemove = function() {
            if (this.props.isFinal !== true) {
                return <div className="remove" onClick={() => {this.props.remove(this.props.id)}}><div>-</div></div>;
            } else {
                return <div className="add" onClick={this.props.add}><div>+</div></div>;
            }
        }
        addOrRemove = addOrRemove.bind(this);

        return (
            <div className="input-wrap">
                <div className="input">
                    {canEdit()}
                </div>
                <div className="abundance">
                    <DynamicNumber
                        min={this.props.min}
                        max={this.props.max}
                        step={this.props.step}
                        name="lowerRatio"
                        value={this.state.upperLeaf}
                        fr={this.registerLeafletValue}
                        type="linked" />
                    <div className="to">:</div>
                    <DynamicNumber
                        min={this.props.min}
                        max={this.props.max}
                        step={this.props.step}
                        name="upperRatio"
                        value={this.state.lowerLeaf}
                        fr={this.registerLeafletValue}
                        type="linked" />
                </div>
                {addOrRemove()}
                <div className="description">{this.props.description}</div>
            </div>
            )
    }
}