상태 배열에서 삭제하는 반응

Question

나는 React로 먼저 앱을 만들고 있습니다. 사용자가 태스크를 클릭하여 배열 및 UI에서 제거 할 수있는 삭제 기능을 생성하려고합니다.

저는 다른 튜토리얼에 이어 몇 가지 다른 시도를 해왔지만 행운은 없습니다. (주석 처리 된 섹션 확인) deleteItem 함수 내의 내 console.log가 정의되지 않은 것으로 표시되어 올바른 데이터를받지 못한다는 것을 알고 있습니다. 나는 이유에 관해서 길을 잃었다.

App.js :

import React, { Component } from 'react'; 
import { List } from './list'; 

export class Todo extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      term: '', 
      items: [] 
     }; 
     this.deleteItem = this.deleteItem.bind(this); 
    } 
    onChange = (e) => { 
     this.setState({term: e.target.value}); 
    } 
    onSubmit = (e) => { 
     e.preventDefault() 
     if (this.state.term === "") { 
      alert("You must enter something!"); 

     } else { 
      this.setState({ 
       term: '', 
       items: [...this.state.items, this.state.term] 
      }) 
     } 
    } 

    deleteItem(index){ 
     // var filteredItems = this.state.items.filter(function (item) { 
     // return(item.index !== index); 
     // }); 
     // console.log(filteredItems); 
     // this.setState({ 
     // itmes: filteredItems 
     // }) 

     this.setState({items: this.state.items.filter(function(item){ 
      console.log(item.index) 
      return item !== item.index 
     })}) 
     console.log(this.state.items) 
     // if (item.index === index) { 
     //  var indArr = this.state.items.indexOf(item.index); 
     //  this.state.items.splice(indArr, 1); 
     // } 

    } 


    render() { 
     return(
      <div> 
       <h3>You currently have {this.state.items.length} things to do.</h3> 
       <form className="Todo" onSubmit={this.onSubmit}> 
        <input placeholder="Enter task" value={this.state.term} onChange={this.onChange} /> 
        <button>add</button> 
       </form> 
       <List items={this.state.items} delete={this.deleteItem}/> 
      </div> 
     ) 
    } 
} 

List.js

import React, { Component } from 'react'; 


export class List extends Component { 
    constructor(props) { 
     super(props); 
     this.delete = this.delete.bind(this); 
    } 
    delete(key) { 
     this.props.delete(key); 
    } 
    render() { 
     return(
      <ul> 
       { 
        this.props.items.map((item, key) => <div class="listItems" 
         onClick={(e) => this.delete(item.key)} 
         key={key}>{item}</div>) 
       } 
      </ul> 
     ) 
    } 
} 

어떤 도움을 깊이 감상 할 수있다.

Answer 1

코드에 몇 가지 문제점이 있음을 발견했습니다.

TD :

List.js에 this.delete하는 https://stackblitz.com/edit/react-n2uy9z

1 패스 잘못된 값 : LR

// List.js 
onClick={(e) => this.delete(item.key) 
// instead => 
onClick={() => this.delete(item) 

// App.js 
return item !== item.index 
// instead => 
return item !== index 

이 내 코드 링크입니다, 당신은 모양을 가질 수있다

onClick={(e) => this.delete(item.key) 

item.key은 배열 색인이므로 item을 전달해야합니다. 삭제할 t. item을 사용하기 때문에 매개 변수 e이 필요하지 않습니다. item 배열의 값이므로

2 필터 콜백 함수

는 더 index 속성이 없으며,

this.setState({items: this.state.items.filter(function(item){ 
     console.log(item.index) 
    return item!== item.index 
})}) 

item.index 정의되지 옳지 않다. 삭제 될 값은 index이며, 이는 deleteItem 함수에 전달되므로 반환 item !== index을 사용해야합니다.

3. 잘못된 DOM 속성 class.

이것은 <div class="listItems"의 경고입니다. '경고 : 잘못된 DOM 속성 class입니다. className을 찾으셨습니까? '.

class 대신 className을 사용하십시오.

Answer 2

잘못된 구성 요소에 삭제 기능을 바인딩한다고 생각합니다. List.js 클래스에서 this.delete = this.delete.bind(this);을 제거하고 onClick 함수에서 직접 this.props.delete(key)을 호출 해보십시오.