Ajax 在componentDidMount内的API调用后设置状态

我正在尝试实现一个自定义选择，它显示从API获取的语言列表

我在componentDidMount生命周期钩子中进行api调用，然后根据我获取的数据更新组件的状态

一切似乎都正常，但我总是犯这样的错误：

警告：设置状态（…）：只能更新已安装或正在安装的 组成部分。这通常意味着您在未安装的服务器上调用了setState（） 组成部分。这是禁止操作。请检查代码以了解 语言选择组件

以下是我的代码片段：

export default class LanguageSelect extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isLoading: false,
      languages: []
    };
  }

  // ...

  componentDidMount() {
    http.get('/api/parameters/languages')
      .then(

        // the Array.map is just to restructure the data fetched form the API
        data => this.setState({ languages : data.map(l => ({ label: l.LocalName, value: l.Code, })) }),

        // Error case
        error => console.error('Error: Languages data could not be fetched', error)
      )
  }

  // Render function
}

我不明白，我唯一的setState调用是在componentDidMount（）生命周期内进行的，因此只有在安装组件时才会执行

---

提前感谢

您可以使用

isMounted（）

检查它是否已安装

if (this.isMounted()) {
  this.setState({...});
}

---

尽管这是一种反模式，您可以在此处找到一些关于最佳实践解决方案的建议：

您的组件很可能在请求完成之前已卸载。如何在应用程序中使用此

语言选择
组件？如果将其移动到componentWillMount（），该怎么办？安装组件后是否有理由发送请求？您是否尝试使用
axios
或
fetch
进行异步调用？我建议使用
componentWillUnmount
取消设置状态操作。此链接中提供了一个示例