Question

我正在使用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获取新数据并显示。

Answer 1

与其在componentDidMount中调用pets数据，不如将其移动到如下所示的单独函数并将其绑定到构造函数中。

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

并按如下所示在componentDidMount中调用该函数

componentDidMount() {
    this.fetchPetData();
  }

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

this.props.fetchPetData();

和父组件中

<Child fetchPetdata={this.fetchPetData} />

Answer 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方法中

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

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

2 个答案: