组件重新渲染后的 React API 调用答案

【问题标题】：React API call after component re-render组件重新渲染后的 React API 调用
【发布时间】：2018-10-30 10:35:51
【问题描述】：

我有一个调用 API 的 componentDidMount，然后有一个 this.setState({...this.state})。

在渲染内部，我有一个调用删除功能的按钮。现在，当调用此删除时，我正在重新渲染，但我还希望调用 componentDidMount 中存在的此 API，因为删除功能会删除同一组件中的一些数据，这些数据稍后会显示更新的值。

问题是，当我重新加载页面时，我得到了所需的数据，但重新渲染没有显示所需的数据。

【问题讨论】：

当项目被删除时，您需要再次setState 以使组件显示更新的项目的新状态。
除了代码说明外，最好看实际代码。

标签： reactjs

【解决方案1】：

实际上，您在componentDidMount 中编写的 API 调用代码可以编写为一个单独的函数，然后您可以在删除数据时调用该函数。

componentDidMount() {
    this.fetchData();
}

// using arrow function to achieve correct context binding
fetchData = () => {
   // your API call here
} 

delete = () => {
   // call fetchData here after delete
   this.fetchData();
}

【讨论】：

我同意@Shubham Khatri。这是我解决此问题的方法。 stackoverflow.com/questions/54892155/…

【解决方案2】：

如果您的反应版本将小于 16 ，那么您可以通过componentDidUpdate 联系我们。这已被弃用，但您仍然可以在其名称前使用 UNSAFE_ 标志。

查看 stackoverflow 本身的此链接以获取真实示例：here

如果您想在 React 16 及更高版本中使用更强大的处理方式，您可以使用 getDerivedStateFromProps ，为此您可以从 stackoverflow 检查相应的处理方式：here

【讨论】：