JSスプライスが正常に反応しないコンポーネントを削除する

Question

私のコードは、親（Show）コンポーネントと子（Editable）コンポーネントで構成されています。 親には、子要素がプッシュされた配列が含まれています。分かりやすくするためにスクリーンショットを添付しています。

I）は、（スプライスを使用して、子（配列要素）を削除しようとしています。私は、配列のスプライシングに正しい出力を取得しています。スクリーンショットの例配列 "new"を配列から削除する場合arr = [dat2、dat3]フロントエンドで最後の要素が削除され、以下のようにdat2が表示されます。必要に応じてdat2とdat3を取得します。私は正しいインデックスを使用してスプライシングを行っていますが、それはUIでcorectly動作していないようです。

助けてください。私はほとんどすべてのものを試してみました:(

私は必要な機能を転送しています

親コード：

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

問題はあなたのインデックスであることがあります子供が

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" 
      /> 

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

お手伝いがあります。