리프팅 상태가 작동하지 않습니다.

Question

FilterableProductTable의 상태를 수정하기 위해 하위 구성 요소에 함수를 전달했습니다. 콘솔 로그에서이 오류가 발생하더라도 올바르게 작동합니다. 'catch되지 않은 TypeError : this.setState가 [insertItems로] Object.handleInsertItems '어쨌든

handleInsertItems(newItem){ 
    console.log(newItem); 
     this.setState(prevState => ({ 
      active: prevState.active, 
      items: prevState.items.concat('am') 
     })); 

이 항목의 상태를 업데이트하지 않거나 내가 변경 내용을 볼 수 없습니다에서 기능 ,

class ProductRow extends React.Component { 
    constructor(props){ 
     super(props); 
     this.state= {active: false}; 
     this.handleClick = this.handleClick.bind(this); 
    } 

    handleClick() { 
     this.setState(prevState => ({ 
      active: !prevState.active 
     })); 
     this.props.insertItems(this.props.name); 
    } 

    render() { 
     return (
      <p className={ this.state.active ? 'active service' : 'service' } onClick={this.handleClick}> 
       {this.props.name} 
      </p> 
     ); 
    } 
} 

class ProductTable extends React.Component { 
    render() { 
     var rows = []; 
     var lastCategory = null; 
     var func = this.props.insertItems; 
     this.props.products.forEach(function(product) { 
      if (product.category !== lastCategory) { 
       rows.push(<ProductCategoryRow category={product.category} key={product.category} />); 
      } 
      rows.push(<ProductRow name={product.name} insertItems={func} />); 
      lastCategory = product.category; 
     }); 
    return (
     <div id="services"> 
      {rows} 
     </div> 
    ); 
    } 
} 

class FilterableProductTable extends React.Component { 


     constructor(props) { 
      super(props); 
      this.state = { 
       posts: [], 
      }; 
     } 
     fetch() { 
      axios.get(this.props.getSite) 
       .then(res => { 
        this.setState({ 
         posts: res.data.functionality 
        }); 
       }); 
     } 

     componentDidUpdate(){ 
      this.fetch(); 
     } 
     componentDidMount() { 
      this.fetch(); 
     } 
     render() { 
      return (
       <div> 
        <ProductTable products={this.state.posts} insertItems={this.props.insertItems}/> 
       </div> 
      ); 
     } 
    } 

export class App extends React.Component { 

    constructor(props){ 
     super(props); 
     this.state= {active: true, items: ['noe']}; 
     this.handleClick = this.handleClick.bind(this); 
    } 

    handleClick() { 
     this.setState(prevState => ({ 
      active: !prevState.active 
     })); 

    } 

    handleInsertItems(newItem){ 
     console.log(newItem); 
     this.setState(prevState => ({ 
      active: prevState.active, 
      items: prevState.items.concat('am') 
     })); 
    } 

    render() { 
     console.log('newITem'); 
     return (
      <div> 
       <FilterableProductTable 
        getSite={ this.state.active ? '/get_platforms' : '/get_features' } 
        insertItems={this.handleInsertItems} 
       /> 
       <a className={ this.state.active ? 'button' : 'hidden' } onClick={this.handleClick}><span>Next</span></a> 
       <TotalComponent items={this.state.items}/> 
      </div> 

     ); 
    } 
} 

Answer 1

전달 된 모든 기능의 결합 버전을 만들기 하위 구성 요소가 올바른 컨텍스트로 함수를 호출하지 않으므로 매개 변수로 전달합니다. 생성자 :

this.handleInsertItems = this.handleInsertItems.bind(this);