React：如何从另一个组件触发包含生命周期方法的函数？

Question

我有两个组件Navbar和Modal。

Navbar包含一个名为displayData()的函数，它包含一个名为componentDidMount()的生命周期方法。

因此，在模态组件中我有一个使用FetchApi更新数据的函数，在保存我需要触发displayData()函数的数据时，我试图将其作为道具传递下去，但它仍然没有被触发

我在这做错了什么？任何帮助，将不胜感激

包含componentDidMount的Navbar代码

  //Displaying the Data
  componentDidMount() {
    this.displayData();
  }
  displayData() {
    fetch("/user")
      .then(data => data.json())
      .then(data => {
        console.log(data);
        this.setState({
          userArray: data
        });
      });
  }

我需要触发displayData()的模态代码

 updateBtn = e => {
    fetch(`/user/${id}`, {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(newData)
    })
      .then(data => {
        return data.json();
      })
      .then(data => {
        console.log(data);
        this.props.displayData(this); // This is where i'm trying to trigger the function
      })
      .catch(err => {
        console.log(err);
      });
  };

从Navbar调用Modal。我在显示器中传递displayData()作为道具

          <Modal
            data={this.state.username}
            dataone={this.state.email}
            id={this.state.id}
            close={this.closeModel}
            log={this.logChange}
            display={this.displayData}
          />

Answer 1

// Navbar Component

constructor(props) {
  this.state = { isFetchComplete: false }
}

updateBtn = e => {
  fetch(`/user/${id}`, {
    method: "PUT",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(newData)
  })
    .then(data => {
      return data.json();
    })
    .then(data => {
      this.setState({ isFetchComplete: true })
    })
    .catch(err => {
      console.log(err);
    });
};

{ this.state.isFetchComplete &&
  <Modal
  data={this.state.username}
  dataone={this.state.email}
  id={this.state.id}
  close={this.closeModel}
  log={this.logChange}
/>
}

//模态组件

constructor (props) {
  super(props)
  this.state = {}
  this.displayData = this.displayData.bind(this)
}
//Displaying the Data
 componentDidMount() {
  this.displayData();
}
displayData() {
  fetch("/user")
    .then(data => data.json())
    .then(data => {
      console.log(data);
      this.setState({
        userArray: data
      });
    });
}

希望有所帮助!!

Answer 2

使用箭头函数定义displayData()，使其在词法上绑定到Navbar：

  displayData = () => {
    fetch("/user")
      .then(data => data.json())
      .then(data => {
        console.log(data);
        this.setState({
          userArray: data
        });
      });
  }

然后在你的Modal代码中，你调用this.props.display，因为你通过了道具：display={this.displayData}

.then(data => {
  console.log(data);
  this.props.display();
})