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>组件不应具有任何状态，只需使用props即可。

所以尝试重写：

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

原因在于，在做出反应时，你不会将状态从一个组件传递到另一个组件。状态是包含在单个组件中的东西。一个好的模式是父组件保持状态，并通过道具与孩子沟通。

从子组件更改父组件中的状态，然后将该状态作为属性传递并更改子组件中的状态

1 个答案: