在子状态更改时触发父组件的更新答案

【问题标题】：Triggering update of parent component on child state change在子状态更改时触发父组件的更新
【发布时间】：2018-08-06 12:38:13
【问题描述】：

我正在探索使用 React 作为前端框架的 firebase，但遇到了以下问题：

我有以下带有生命周期钩子的父组件，它从 firebase 获取我的数据并用它填充本地状态。之后组件输出状态。

state = {
    pets: null
  };

  componentDidMount() {
    db
      .onceGetPets()
      .then(snapshot => this.setState(() => ({ pets: snapshot.val() })));
  }

  render() {
    const {pets} = this.state;
     return ({pets})}

我还有一个将新条目写入数据库的子组件，其外观如下：

state = {
    ...INITIAL_STATE
  };

  submitHandler = event => {
    const { name, age, animal, breed } = this.state;

    db.doCreatePet(
      name,
      age,
      animal,
      breed,
      auth.currentUser.email.slice(0, -4)
    );
    this.setState({ ...INITIAL_STATE });
    event.preventDefault();
  };
    render(){
      return(<StyledNewPetForm show={this.props.show} onSubmit={this.submitHandler}/>)}

我想实现以下行为：

当用户提交表单（子组件）时，它应该触发父组件（显示数据的组件）的重新渲染，然后从 firebase 获取新数据并显示它。

【问题讨论】：

标签： javascript reactjs firebase firebase-realtime-database

【解决方案1】：

不要在componentDidMount中调用宠物数据，而是将其移动到如下的单独函数中，并在构造函数中绑定函数。

fetchPetData(){
 db
      .onceGetPets()
      .then(snapshot => this.setState(() => ({ pets: snapshot.val() })));
}

并调用componentDidMount中的函数，如下所示

componentDidMount() {
    this.fetchPetData();
  }

然后您可以将函数作为道具传递给子组件，并在提交函数中调用子组件中的函数，如下所示。

this.props.fetchPetData();

在父组件中

<Child fetchPetdata={this.fetchPetData} />

【讨论】：

我可以在onChange上触发几个函数吗？
是的，你可以。但是，如果您在 onChange 事件中进行大量更改，则会再次出现性能问题。尝试单独使用 onChange 事件进行验证，使用 onSubmit 进行最终数据提交。

【解决方案2】：

一个快速的解决方案是将函数 prop 传递给您在更新时调用的父组件。因此，在您的子功能中，您有类似

submitHandler = event => {
  const { name, age, animal, breed } = this.state;

  db.doCreatePet(
    name,
    age,
    animal,
    breed,
    auth.currentUser.email.slice(0, -4)
  );
  this.setState({ ...INITIAL_STATE });
  event.preventDefault();
  this.props.reloadData(); // Add this
};

在父组件的渲染函数中，你会拥有

fetchData() {
  db
    .onceGetPets()
    .then(snapshot => this.setState(() => ({ pets: snapshot.val() })));
}

在渲染方法中你会

render() {
  return (
    <Child reloadData={this.fecthData} ...props/>
  )
}

【讨论】：