React，setState(...):在未安装组件上调用setState()???
setState(...):这通常意味着您在未安装的组件上调用了 set state()。
Warning: setState(...): Can only update a mounted or mounting component. This usually means you called set state() on an unmounted component. This is a no-op. Please check the code for the TestModal component.
我就是不明白，这有什么问题吗？
```jsx
class TestModal extends Component {
constructor(props, context) {
super(props, context);
this.state = {
loading: false,
visible: true
};
}
onTest = () => {
// copy state, do test fetch
this.testOK();
};
handleSubmit = (e) => {
e.preventDefault();
this.props.form.validateFields(
(err, values) => {
if (!err) {
console.log('Received values of form: ', values);
console.log('fetch url = \n', values.textarea);
// fetch data
let url = values.textarea;
this.props.checkTestCommands(url);
this.onTest();
}else{
throw new Error(Error.name, Error.message);
}
}
);
};
testOK = () => {
this.setState({
loading: true
});
this.props.hideModal();
setTimeout(() => {
this.setState({
loading: false,
visible: false
});
}, 1000);
}
testCancel = () => {
this.setState({
visible: false
});
this.props.hideModal();
}
render() {
const {getFieldsValue, getFieldValue, setFieldsValue, getFieldDecorator} = this.props.form;
const formItemLayout = {
labelCol: {
span: 6
},
wrapperCol: {
span: 14
}
};
return (
<div>
{/* query object */}
{/* no footer */}
<Modal
title="命令行"
onOk={this.testOK}
onCancel={this.testCancel}
visible={this.state.visible}
footer={[]}
>
{/* loading={this.state.loading} */}
<Form
onSubmit={this.handleSubmit}
layout="horizontal">
<FormItem
label="测试命令行"
hasFeedback
{...formItemLayout}>
{
getFieldDecorator('textarea', {
rules: [
{
required: false,
message: ' url 长度必须 30 个字符之间'
}
],
initialValue: `http://10.1.5.31:8080/http/report/query?{"ApiName":"JY.Topic.Market_profile.Investors_data_statistics.AccountStatistics"}`,
})(
<Input
type="textarea"
placeholder="请先点击 “开始测试” 按钮!"
rows="10"
cols="70"
/>
)
}
</FormItem>
{/* onClick={this.props.checkTestCommands} */}
<FormItem style={{textAlign: "center"}}>
<Button
onClick={this.onTest}
type="primary"
htmlType="submit"
icon="hourglass"
style={{margin: "auto 10px"}}
loading={this.state.loading}>
开始测试
</Button>
<Button
onClick={this.testCancel}
size="large"
style={{margin: "auto 10px"}}
icon="close">
关闭
</Button>
{/* ref="submit_btn" */}
</FormItem>
</Form>
</Modal>
</div>
);
}
}
```
这是新版本代码，但还是不行？
class TestModal extends Component {
constructor(props, context) {
super(props, context);
this.state = {
loading: false,
visible: true
};
}
onTest = () => {
// copy state, do test fetch
this.testOK();
};
/* componentWillUnmount(){
this.props.hideModal();
this.setState({
loading: false,
visible: false
});
} */
handleSubmit = (e) => {
e.preventDefault();
this.props.form.validateFields(
(err, values) => {
if (!err) {
console.log('Received values of form: ', values);
console.log('fetch url = \n', values.textarea);
// fetch data
let url = values.textarea;
this.props.checkTestCommands(url);
this.onTest();
}else{
throw new Error(Error.name, Error.message);
}
}
);
};
testOK = () => {
this.setState({
loading: true
});
setTimeout(() => {
this.setState({
loading: false,
visible: false
});
this.props.hideModal();
}, 1000);
}
testCancel = () => {
this.setState({
visible: false
});
this.props.hideModal();
}
render() {
const {getFieldsValue, getFieldValue, setFieldsValue, getFieldDecorator} = this.props.form;
const formItemLayout = {
labelCol: {
span: 6
},
wrapperCol: {
span: 14
}
};
return (
<div>
{/* query object */}
{/* no footer */}
<Modal
title="命令行"
onOk={this.testOK}
onCancel={this.testCancel}
visible={this.state.visible}
footer={[]}
>
{/* loading={this.state.loading} */}
<Form
onSubmit={this.handleSubmit}
layout="horizontal">
<FormItem
label="测试命令行"
hasFeedback
{...formItemLayout}>
{
getFieldDecorator('textarea', {
rules: [
{
required: false,
message: ' url 长度必须 30 个字符之间'
}
],
initialValue: `http://10.1.5.31:8080/http/report/query?{"ApiName":"JY.Topic.Market_profile.Investors_data_statistics.AccountStatistics"}`,
})(
<Input
type="textarea"
placeholder="请先点击 “开始测试” 按钮!"
rows="15"
cols="500"
/>
)
}
</FormItem>
{/* onClick={this.props.checkTestCommands} */}
<FormItem style={{textAlign: "center"}}>
<Button
onClick={this.onTest}
type="primary"
htmlType="submit"
icon="hourglass"
style={{margin: "auto 10px"}}
loading={this.state.loading}>
开始测试
</Button>
<Button
onClick={this.testCancel}
size="large"
style={{margin: "auto 10px"}}
icon="close">
关闭
</Button>
{/* ref="submit_btn" */}
</FormItem>
</Form>
</Modal>
</div>
);
}
}截屏 gif!
最佳答案
在您的 testOK 方法中，当 TestModal 表单已关闭(即组件已卸载)时，您将在 1 秒延迟后调用 setState。这是一个废话。
关于javascript - 设置状态(...): This usually means you called set state() on an unmounted component，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45614178/