JS 스플 라이스가 올바르게 작동하지 않아 반응 구성 요소가 제거되었습니다.

Question

내 코드는 상위 (표시) 구성 요소와 하위 (편집 가능) 구성 요소로 구성됩니다. 부모는 자식 요소가 푸시 된 배열을 포함합니다. 명확성을 위해 스크린 샷을 첨부하고 있습니다.

나는 아이 (배열 요소) 스플 라이스를 사용하여()를 제거하려합니다. 나는 접합에 배열을 올바른 출력을 얻고있다. 스크린 샷과 같은 예 배열 "new"를 배열에서 삭제할 경우 arr = [dat2, dat3] 프론트 엔드에서 마지막 요소가 삭제되고 아래와 같이 dat2가 표시됩니다. 클릭 필요에 따라 dat2와 dat3을 변경합니다. 올바른 인덱스를 사용하여 접합을 완료했습니다.하지만 UI에서 핵심적으로 작동하지 않는 것 같습니다.

도와주세요. 나는 거의 모든 :(난 그냥 필요한 기능을 전달하고

을 시도

이

부모 코드 :.

에게

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

도움이 될만한 자료입니다.