user8202629
Reputation:
setState(...): This usually means you called set state() on an unmounted component
React , setState(...):, called setState() on an unmounted component ???
setState(...): This usually means you called set state() on an unmounted component.
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.
I just can't figure out, what's wrong with this?
```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>
);
}
}
```
this is a new version code, but it still doesn't work?
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>
);
}
}a screencut gif!
Upvotes: 0
Views: 2472
Answers (3)
user8202629
Reputation:
here is one of my solutions!
Hooray, it works now! Just need to remove the duplicate set
visible=false, it should be alwaysvisible=true; because it should be call parent component's methods to realizeshow/hideitself!
Thanks to everybody, who made his answer to this question!
```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 = (e) => {
// e.preventDefault();
console.log(`testOK e`, e);
this.setState({
loading: true
});
setTimeout(() => {
this.setState({
loading: false
});
this.props.hideModal();
}, 1000);
}
testCancel = () => {
this.props.hideModal();
}
render() {
const {getFieldsValue, getFieldValue, setFieldsValue, getFieldDecorator} = this.props.form;
const formItemLayout = {
labelCol: {
span: 6
},
wrapperCol: {
span: 14
}
};
// destructuring assignment
const {visible, loading} = this.state;
return (
<div>
{/* query object */}
{/* no footer */}
<Modal
title="命令行"
onOk={this.testOK}
onCancel={this.testCancel}
visible={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: `10.1.5.31:8080/http/report/query?{"SecuCode":"000011","Names":"阳琨","ApiName":"fund.f9.fund_profile.FundManager.BasicInformations","WriteType":"json"}`,
})(
<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={loading}>
开始测试
</Button>
<Button
onClick={this.testCancel}
size="large"
style={{margin: "auto 10px"}}
icon="close">
关闭
</Button>
{/* ref="submit_btn" */}
</FormItem>
</Form>
</Modal>
</div>
);
}
}
```
Upvotes: 0
Ali Faris
Reputation: 18602
this is where you have the problem
this.props.hideModal();
setTimeout(() =>
{
this.setState({
loading: false,
visible: false
});
}, 1000);
you hide the modal and after 1 second you try to change the state
Upvotes: 1
Amid
Reputation: 22352
In your testOK method you are calling setState after 1sec delay when the TestModal form is already closed (that is the component is already unmounted). This is a noop.
Upvotes: 3
Related Questions
- setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op
- index.js:1 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
- Does somebody know how to fix this error: Can't call setState (or forceUpdate) on an unmounted component....?
- "Warning: Can't call setState (or forceUpdate) on an unmounted component", but component does not have setState?
- Warning: setState(...): Can only update a mounted or mounting component. This usually means
- setState(…): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op
- setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component
- setState(...) called on an unmounted component
- Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component
- Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component