更改父組件中父狀態的狀態，然後將該狀態作爲屬性傳遞並更改子組件中的狀態

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 
    } 
    ... 

的問題是當點擊一個按鈕時，我會期待的狀態對象的更改10屬性將被改變，並且將屬性傳遞到觸發事件的同一子組件。然後我會期待這個子組件檢測父母的狀態是否發生了變化以及屬性，然後它會改變它自己的狀態，並且UI會渲染元素的屬性直到響應出現（當響應到來時，加載被移除） 。

爲什麼不按預期工作？我如何解決它？

Answer 1

在這個例子中，<Button>組件不應該有任何狀態，只需要使用道具。

因此，嘗試重寫：

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

的原因是，在反應過來，你不要從一個組件傳遞狀態到另一個狀態。狀態是包含在單個組件中的東西。一個好的模式是讓父組件保持狀態，並通過道具與孩子進行交流。