[英]setState Can only update a mounted or mounting component
我有一个登录组件,当用户提交登录表单时,我收到错误
警告:setState(...):只能更新已安装或安装的组件。 这通常意味着您在已卸载的组件上调用了setState()。
我甚至无法找到这个错误的位置
class LoginForm extends React.Component {
state = {
identifier: '',
password: '',
errors: {},
isLoading: false
};
static contextTypes = {
router: PropTypes.object.isRequired
};
isValid = () => {
const { errors, isValid } = validateInput(this.state);
if (!isValid) {
this.setState({ errors });
}
return isValid;
};
onSubmit = (e) => {
e.preventDefault();
if (this.isValid()) {
this.setState({ errors: {}, isLoading: true });
const loginDetails = Object.assign({}, {identifier: this.state.identifier, password: this.state.password});
this.props.login(loginDetails).then(res => {
console.log('res', res);
return this.context.router.push('/');
}).catch(error => {
return this.setState(Object.assign({}, this.state, error, {isLoading: false}));
});
}
};
onChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
};
render() {
const { errors, identifier, password, isLoading } = this.state;
return (
<form onSubmit={this.onSubmit}>
<fieldset>
<legend>Login</legend>
{ errors.form && <div className="alert alert-danger">{errors.form}</div> }
<TextFieldGroup
name="identifier"
label="Username / Email"
value={identifier}
error={errors.identifier}
onChange={this.onChange}
/>
<TextFieldGroup
name="password"
label="Password"
value={password}
error={errors.password}
onChange={this.onChange}
type="password"
/>
<div className="form-group">
<button className="btn btn-primary btn-lg" disabled={isLoading}>Login</button>
</div>
</fieldset>
</form>
);
}
}
export default connect(null, { login })(LoginForm);
错误究竟在哪里?
您正在使用该承诺调用运行此异步代码:
onSubmit = (e) => {
e.preventDefault();
if (this.isValid()) {
this.setState({ errors: {}, isLoading: true });
const loginDetails = Object.assign({}, {identifier: this.state.identifier, password: this.state.password});
this.props.login(loginDetails).then(res => {
console.log('res', res);
return this.context.router.push('/');
}).catch(error => {
return this.setState(Object.assign({}, this.state, error, {isLoading: false}));
});
}
};
所以每当promise失败时,它都会调用setState
。 即使您的组件不再安装,此代码也会运行。
这里有一些文档和建议来克服承诺问题https://facebook.github.io/react/blog/2015/12/16/ismounted-antipattern.html
这个库似乎用装饰器包装了promises - 我并不是建议你使用它,它只是一种理解正在发生的事情的好方法。
顺便说一句,这是使用redux的一个很好的理由。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.