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

【问题标题】：React: How do i trigger a function that contains a lifecycle method, from another component?React：如何从另一个组件触发包含生命周期方法的函数？
【发布时间】：2019-04-06 07:13:20
【问题描述】：

我有两个组件 Navbar 和 Modal。

导航栏包含一个名为 displayData() 的函数，其中包含一个名为 componentDidMount() 的生命周期方法。

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

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

包含 componentDidMount 的导航栏代码

  //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);
      });
  };

从导航栏调用 Modal。我在显示中将 displayData() 作为道具传递

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

【问题讨论】：

您能否发布更多代码，关于您如何从 Navbar 组件调用 Modal 组件？
@tarzenchugh 是的，我已经更新了问题
是的，我删除了，它仍然不起作用，它表明 this.props.displayData 不是一个函数
您没有将任何数据传递给 displayData 函数，并且 Navbar 组件中的 displayData 函数将被触发，因为它在 componentDidMount 内部。当您使用状态变量获取结果表单 put call 时，您只需要调用<Modal /> 组件即可。
我可以知道你为什么在该函数中将它作为参数传递，并且你在道具中将 DisplayData 函数作为显示传递，所以尝试调用 this.props.display() 来代替

标签： reactjs fetch-api

【解决方案1】：

// 导航栏组件

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
      });
    });
}

希望有帮助！！

【讨论】：

【解决方案2】：

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

  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();
})

【讨论】：