ReactJS - 정의되지 않은 'items'속성을 읽을 수 없습니다.

Question

저는 ReactJS를 배우고 있습니다. 그러나 나는이 오류를 발견하지 못했습니다.

하위 구성 요소에서 부모의 items 배열 상태를 변경하고 싶습니다. addItem 함수를 보조 컴포넌트로 children 컴포넌트에 전달하려고 시도했습니다. 입력 할 때, children 컴포넌트는이 함수를 호출하고 입력 값을 전달합니다.

addItem 메소드에서 console.log(this.state.items)을 시도하면이 오류가 발생합니다.

Uncaught TypeError: Cannot read property 'items' of undefined 

홈페이지 App.js

class App extends Component { 
    constructor() { 
     super(); 
     this.state = { 
      items: [] 
     }; 
    } 

    render() { 
     return (
      <div className="App"> 
       <p>Todo List</p> 
       <AddItemBox addNewItem={this.addItem}/> 
       <ItemsList items={this.state.items}/> 
      </div> 
     ); 
    } 

    addItem(item) { 
     var listItems = this.state.items; 
     listItems.push(item); 
     this.setState({items: listItems}); 
    } 
} 

하위 구성 요소 : AddItemBox.js

class AddItemBox extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      item: '' // input value 
     }; 
    } 

    render() { 
     return (
      <div className='AddItemBox'> 
       <input type='text' placeholder='add item' onChange={e => { 
       this.onInputChange(e.target.value) 
      }} onKeyPress={e => { 
       if (e.key === 'Enter') { 
        this.onInputEnter(e.target.value) 
       } 
      }}/> 
      </div> 
     ); 
    } 

    onInputChange(item) { 
     this.setState({item}); 
    } 

    onInputEnter(item) { 
     // Now add it to the 'items' array state 
     this.props.addNewItem(item); 
     this.setState({item: ''}); 
    } 
} 

Answer 1

나는 @AndrewLi는 설명 할 수 있습니다. 이 article을 확인하십시오. React에서 함수를 바인딩해야하는 이유에 대해 중도에서 설명합니다. 간단한 설명은 scope입니다.

addItem 함수 내에 this은 무엇입니까? 그것은 당신이 기대하는 것이 아닐 수도 있습니다. 따라서 적절한 this을 함수에 바인딩해야 this.state.items을 호출하는 등 의도 한 방식으로 사용할 수 있습니다. this이 예상 한 this이 아닌 경우 바람직하지 않은 결과가 발생합니다.

constructor(props) { 
 
     super(props); 
 
     this.state = { 
 
      item: '' // input value 
 
     }; 
 
     
 
     this.addItem = this.addItem.bind(this) 
 
    }

또는 당신은 ES6를 사용하여이 수행 할 수 있습니다 :

그래서 당신은이 작업을 수행 할 수 있습니다

addItem = (item) => { 
 
    var listItems = this.state.items; 
 
    listItems.push(item); 
 
    this.setState({items: listItems}); 
 
}

모두에게 동일하게 제공 결과들

Answer 2

당신은 또한 당신이 당신의 생성자에서 기능을 결합 할 필요가

class App extends Component { 
    constructor() { 
     super(); 
     this.state = { 
      items: [] 
     }; 
     this.addItem = this.addItem.bind(this); 
    } 

    render() { 
     return (
      <div className="App"> 
       <p>Todo List</p> 
       <AddItemBox addNewItem={(item) => this.addItem(item)}/> 
       <ItemsList items={this.state.items}/> 
      </div> 
     ); 
    } 

    addItem(item) { 
     var listItems = this.state.items; 
     listItems.push(item); 
     this.setState({items: listItems}); 
    } 
} 

으로 "AddItemBox"구성 요소의 콜백 대신에 참고 자료로 기능을 전달할 수 있습니다.