하위 구성 요소의 부모 구성 요소에서 상태를 변경 한 다음 해당 구성을 속성으로 전달하고 하위 구성 요소의 상태를 변경하십시오.

Question

두 개의 하위 구성 요소가있는 상위 구성 요소가 있습니다. 버튼 클릭 동작은 상태 부모 구성 요소를 변경해야하며 이는 하위 구성 요소 모두에 영향을줍니다.

export default class SearchView extends React.Component { 
    // attributes 
    state = { 
    loading: false 
    } 

    // 
    constructor(props){ 
    super(props) 
    } 

    // get list of items 
    getItems(){ 
    this.setState({loading:true}) 
    axios.get('/path_to_data').then(response => { 
     this.setState({items:response.data, loading: false}) 
    }).catch(err=>{console.log(err)}) 
    } 

    render(){ 
    return (
     <div> 
     <SearchForm 
      getItems={this.getItems.bind(this)} 
      loading={this.state.loading} 
     /> 
     { this.state.items ? <ItemCards items={this.state.items} /> : "No data"} 
     </div> 
    ) 
    }//render 

}//class 

이 이벤트를 클릭하여 내 구성 요소가 어떻게됩니까입니다 :

export default class SearchForm extends React.Component { 
    // attributes 
    state = { 
    loading: this.props.loading 
    } 

    // render 
    render(){ 
    return (
     <Segment inverted color="yellow"> 
     <Grid columns="2"> 
      <Grid.Column> 
      </Grid.Column> 
      <Grid.Column> 
      <Button 
       loading={this.state.loading} 
       disabled={this.state.loading} 
       color="black" 
       onClick={this.props.getItems} 
      > 
       Search 
      </Button> 
      </Grid.Column> 
     </Grid> 
     </Segment> 
    ) 
    }//render 

}//class SearchForm 

를이 다른 하위 구성 요소입니다

이

export default class ItemCards extends React.Component { 

    // constructor 
    constructor(props){ 
    super(props) 
    } 
    // state 
    state = { 
    items: this.props.items 
    } 
    ... 

문제가

이

내 부모 구성 요소입니다 단추를 클릭하면 상태 개체의 변경이 예상됩니다. loading 속성이 변경되어 이벤트가 트리거 된 동일한 하위 컴포넌트로 속성이 전달됩니다. 그리고 나서이 자식 구성 요소가 부모 상태가 변경되었음을 감지하고 해당 속성도 감지 한 다음 자신의 상태를 변경하고 UI는 응답이 올 때까지 요소에 loading 특성을 렌더링합니다 (응답이 오면로드가 제거됨) .

왜이 코드가 예상대로 작동하지 않습니까? 어떻게 수정해야합니까?

Answer 1

이 예에서 <Button> 구성 요소는 상태가 없어야하며 대신 소품 만 사용하십시오.

그래서 다시 쓰기 시도 :

<Button 
    loading={this.props.loading} 
    disabled={this.props.loading} 
    color="black" 
    onClick={this.props.getHotels}> 

이유는 반응에, 다른 한 구성 요소에서 상태를 통과하지 못한 것입니다. 국가는 개별 구성 요소 내에 포함 된 것입니다. 부모 구성 요소가 상태를 유지하고 소품을 통해 어린이와 커뮤니케이션하는 것이 좋은 패턴입니다.