Question

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

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

一切似乎都能正常工作，但我总是会收到此错误：

警告：setState（...）：只能更新已安装的或正在安装的零件。这通常意味着您在未安装的设备上调用了setState（）零件。这是无人值守。请检查代码 LanguageSelect组件。

这是我的代码的片段：

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（）生命周期内，因此仅在安装组件时才执行？

预先感谢

Answer 1

您可以使用isMounted()检查它是否已安装

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

尽管这是一种反模式，但您可以在此处找到有关最佳做法解决方案的一些建议：https://reactjs.org/blog/2015/12/16/ismounted-antipattern.html

在componentDidMount内部的API调用之后的setState

1 个答案: