array.splice不起作用，它总是删除最后一个元素

Question

    add() {
    rendercomponent.push(UiInput);
    childJson.push(this.dynamicJson())
    this.setState({ documents: rendercomponent, Json: childJson });

}
componentDidMount() {
    rendercomponent.push(UiInput);
    this.setState({ documents: rendercomponent })
}
dynamicJson() {
    return {
        "service": this.state.formValues.text,
        "tax": this.state.formValues.tax,
        "amount": this.state.formValues.amount
    }
}
popComponent = (index) => {
    console.log(`in parent-->>${index}`)
    rendercomponent.splice(index, 1);
    childJson.splice(index, 1);
    this.setState({ documents: rendercomponent,Json: childJson,formValues:{} })

};  render() {
    return (
        <div>
    {this.state.documents.map((Element, index) => {
                                    return <Element key={index} index={index} onUpdate={this.onUpdate} popComponent={() => this.popComponent(index)} />
                                })}
          </div>
);
}

array.splice not working correctly it always deletes the last element from the array

In my UI there is one button to add component, on that button add() function is called

And also there is delete button, on delete button popComponent() function is called.

I want to delete the particular element, it always deletes the last element from the redercomponent array.

please help me to sort this problem

Answer 1

splice would mutate an object rendercomponent , but it won't change the reference of that object. If the reference does not change, the react won't re-render it, as it won't be different as per the react's diffing algorithm. So you can use slice instead of splice . Such that the new object's reference should be different for the earlier object.

Check that rendercomponent!== rendercomponentModified

perhaps

 popComponent = (index) => {
    console.log(`in parent-->>${index}`)
    var rendercomponentModified = [
     ...rendercomponent.slice(0,index),
     ...rendercomponent.slice(index+1)
    ];
    var childJsonModified = [
           ...childJson.slice(0,index), 
           ...childJson.slice(index+1)
    ];
     this.setState({ documents: rendercomponentModified,
    Json: childJsonModified,formValues:{} });
   }

Answer 2

in case index is -1, rendercomponent.splice(index, 1); will just remove the last item of the array