Я пытаюсь изменить состояние родительского компонента от дочернего компонента на основе рендеринга данных в дочернем

Question

Я пытаюсь изменить состояние моего родительского компонента на основе данных, поступающих через дочерний компонент. Я не могу понять, как сменить родителя без кнопки. this.state.rows дочернего элемента поступает из базы данных, и я хочу изменить состояние, чтобы я мог показывать вращающийся значок во время загрузки данных.

class Parent extends Component{
  constructor(props){
    super();
    this.state={
      spinner=false
    }
    this.spinnerUpdate = this.spinnerUpdate.bind(this)
  }

  spinnerUpdate(){}

  render(){
    return(
      <Child spinner={this.spinnerUpdate}/>
    )
  }
}


class Child extends Component{
  constructor(props){
    super(props);
    this.state={
      rows: rows,
    }
    this.spinner = this.spinner.bind(this)
  }

  spinner(){
    if(this.state.rows){
      this.setState({spinner: true})
    }
  }

  render(){
    return(
      <div>
        //random info
      </div>
    )
  }
}

Я ожидал, что функция spinner в дочернем компоненте изменит состояние родительского состояния при визуализации данных.

Answer 1

Дочерний компонент получит spinner в реквизитах передается из родительского компонента.

    class Parent extends Component{
        constructor(props){
         ...
          this.spinnerUpdate = this.spinnerUpdate.bind(this)
        }

      //will receive one param from Child component to hide/show spinner.
        spinnerUpdate(spinnerStatus){
            this.setState({spinner: spinnerStatus})
        }

        render(){
          return(
            <Child spinner={this.spinnerUpdate}/>
          )
        }
      }


      class Child extends Component{
        constructor(props){
          ...
        }

        spinner(){

   //call spinner of parent based on matched criteria
          if(this.state.rows){
            this.props.spinner(true);
          }else{
            this.props.spinner(false);
          }
        }

        render(){
          return(
            <div>
              //random info
            </div>
          )
        }
      }