我找到了有关此问题的线索,但没有一个解决了我的问题。
无法在尚未安装的组件上调用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!"); }
,那么肯定会出现在控制台窗口中。答案 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
。非常感谢那些花时间帮助我的人。