JS сплайс не работает правильно, чтобы удалить компонент React

Question

Мой код состоит из родительского (Показать) и дочернего (Редактируемый) компонента. Родитель содержит массив, в который помещаются дочерние элементы. Я прилагаю скриншот для ясности.

Я пытаюсь удалить дочерний элемент (элемент массива) с помощью splice(). Я получаю правильный вывод при соединении массива. Пример как на скриншоте Если я удаляю "new" из массива, мой массив arr = [dat2,dat3], но во внешнем интерфейсе последний элемент удаляется, и он отображает dat2, новый, как показано ниже. При нажатии на внести изменения я получаю dat2 и dat3 по мере необходимости. Я выполнил соединение с использованием правильного индекса, но в пользовательском интерфейсе он не работает.

Пожалуйста помоги. Я перепробовал почти все:(

Я просто пересылаю требуемые функции.

Родительский код:

handleMinus(id,idShow){

  this.state.Example=this.props.result.examples
  this.state.Example.splice(id,1);  
  this.props.result.examples=this.state.Example;
  this.setState({create:!this.state.create})


};

    render() { 
    var showExm = this.props.result.examples.map(function(result,index){
            console.log("EditableIntents")
            return <div key={index}><EditableIntents
                                    handleMinus={that.handleMinus}
                                    result={result}
                                    indexEg={index}
                                    indexShowInt={that.props.index}
                                    editExample={that.editExample}/>
                          </div>
            });
    return({showExm});
}

Ребенок:

render() { 
    return(
      <div>
      <TextField
              defaultValue={this.props.result}
              hintText={this.props.result}
              onChange= {this.changeEg}
              id="editText"
            />
            <span><IconButton id={"aa"+1} onClick={this.handleMinus} iconStyle={{width: 72, height: 72, float: -60}}><span><MinusIcon /> </span></IconButton></span>
            </div>
          )
   }

 handleMinus(){
     console.log(this.props.indexEg);
    console.log("in Grand child:",this.props.result,this.props.indexEg);
    this.props.handleMinus(this.props.indexEg,this.props.indexShowInt)
   }

Answer 1

Возможно, проблема с вашим индексом

Ребенок:

render() {

    return(
      <div>
      <TextField
              defaultValue={this.props.result}
              hintText={this.props.result}
              onChange= {this.changeEg}
              id="editText"
            />

/* I have just changed here your onClick function */

            <span><IconButton id={"aa"+1} onClick={() => this.handleMinus(index)} iconStyle={{width: 72, height: 72, float: -60}}><span><MinusIcon /> </span></IconButton></span>


            </div>
          )

   }

/*and here I have added parameter */

 handleMinus(keyid){
     console.log(this.props.indexEg);
    console.log("in Grand child:",this.props.result,this.props.indexEg);
    this.props.handleMinus(keyid,this.props.indexShowInt)
   }

Also you should define "this.state.Example" as array

handleMinus(id,idShow){

this.state.Example = [];

  this.state.Example=this.props.result.examples
  this.state.Example.splice(id,1);  
  this.props.result.examples=this.state.Example;
  this.setState({create:!this.state.create})
};

Это может помочь вам.