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

时间:2019-03-18 09:46:22

标签: javascript reactjs typescript react-tsx

我找到了有关此问题的线索,但没有一个解决了我的问题。

  

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

Can't call setState on a component that is not yet mounted

React app. Can't call setState on a component that is not yet mounted

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和调用该方法的按钮(或类似按钮)的组件中,都会遇到此问题。
  • 有人想解决吗?我很感谢他们每个人。 非常感谢

2 个答案:

答案 0 :(得分: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;

答案 1 :(得分:0)

以某种方式,当我构建产品时,问题就解决了

  

。\ mvnw -Pprod -DskipTests

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