无法在尚未安装的组件上调用 setState，即使它已经安装？

Question

大家看到错误了，Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to ``this.state`` directly or define astate = {}; class property with the desired state in the ImageTableItemComponent component.

我见过类似的问题，但没有对我有帮助的答案。这是我的构造函数：

export default class ImageTableItemComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data : [], // ****** This one's the problem *****
            collapsible : false,
        }
        this.loadImagesWithTags();
    }

这里是 loadImagesWithTags() 函数，我在这里使用 setState:

loadImagesWithTags() {
        const imagesAndTags = new ImagesAndTags();
        imagesAndTags.getImagesWithTags()
            .then(imagesAndTags => {
                const data = this.convertDataToObject(imagesAndTags)
                this.setState({data: data,})  // ****** Here I use setState *****
            })
            .catch(reason => {
                console.error('Error loading tags:', reason)
            });
    }

我以前用过同样的方法，没有收到任何错误。是否存在错误或过时的依赖关系或其他原因，我在这里没有看到的任何东西都会触发此错误？我已经删除了代码中与 collapsible: false, 有关的所有内容，因此我知道错误与数据有关。感谢任何帮助。

Answer 1

您不应在构造函数中的异步操作后调用分配状态的方法。相反，运行 componentDidMount()

中的方法

componentDidMount() {
    this.loadImagesWithTags();
}

我认为这个错误误导了你。并不是组件没有挂载，而是你在 React 组件生命周期中的错误时刻执行了状态更新。

无法在尚未安装的组件上调用 setState，即使它已经安装？

Can't call setState on a component that is not yet mounted, even though it is?

setstate

reactjs