0

我找到了一些关于这个问题的线索，但没有一个能解决我的问题。

无法在尚未安装的组件上调用 setState。这是一个无操作，但它可能表明您的应用程序中存在错误。

无法在尚未安装的组件上调用 setState

反应应用。无法在尚未安装的组件上调用 setState

import React, { Component } from 'react';
import { Card, CardHeader, CardBody, Button, Collapse } from 'reactstrap';

class MyComponent extends React.Component<any, any> {
  constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    this.state = {
      collapse: false,
    };
  }

  toggle() {
    this.setState({ collapse: !this.state.collapse });
  }

  render() {
    return (
          <Card>
            <CardHeader>
              <Button color="link" onClick={this.toggle} className="float-right">
                Click me to toggle collapse
              </Button>
            </CardHeader>
            <Collapse isOpen={this.state.collapse}>
              <CardBody>
                The content being collapsed
              </CardBody>
            </Collapse>
          </Card>
    );
  }
}

export default MyComponent;
  • 如果我componentDidMount() { console.log("Mounted!"); }确定，它仍然出现在控制台窗口中。
  • 我已经尝试过类似线程的答案，例如安装 babel polyfill、删除 react-hot-loader，但它们都不起作用。
  • 我在每个组件中都遇到了这个问题，我有 setState 和一个按钮（或类似的东西）来调用该方法。
  • 任何人都有解决的想法？我很欣赏他们每一个人。非常感谢
4

2 回答 2

0

您收到此错误是因为您尝试更改未安装组件的状态。如果在组件从其父组件中卸载后触发回调，则会发生这种情况。

您可以跟踪组件的挂载状态，如下所示：

import React, { Component } from 'react';
import { Card, CardHeader, CardBody, Button, Collapse } from 'reactstrap';

class MyComponent extends React.Component<any, any> {
  mounted = false;

  constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    this.state = {
      collapse: false,
    };
  }

  componentWillMount() { this.mounted = true; }
  componentWillUnmount() { this.mounted = false; }

  toggle() {
    if(this.mounted) {
       this.setState(({collapse}) => ({ collapse: !collapse }));
    }
  }

  render() {
    return (
          <Card>
            <CardHeader>
              <Button color="link" onClick={this.toggle} className="float-right">
                Click me to toggle collapse
              </Button>
            </CardHeader>
            <Collapse isOpen={this.state.collapse}>
              <CardBody>
                The content being collapsed
              </CardBody>
            </Collapse>
          </Card>
    );
  }
}

export default MyComponent;
于 2019-03-18T10:22:55.830 回答
0

不知何故，当我建立生产时，问题就解决了

.\mvnw -Pprod -DskipTests

. 非常感谢那些花时间帮助我的人。

于 2019-03-18T11:51:32.310 回答