Я реализовал простую форму входа в React с Redux, следуя этому уроку: https://jslancer.com/blog/2017/04/27/a-simple-login-flow-with-react-and-redux/
Все работает, но когда я добавляю куки, я получаю ошибку:
Предупреждение:Невозможно обновить во время существующего перехода состояния (например, в пределах render).Методы рендеринга должны быть в чистом виде от реквизита и состояния.
, а также:
Uncaught Invariant Violation: превышена максимальная глубина обновления.Это может произойти, когда компонент повторно вызывает setState внутри componentWillUpdate или componentDidUpdate.React ограничивает количество вложенных обновлений для предотвращения бесконечных циклов.
Я сделал некоторую отладку, и если я удаляю onChange={e => this.setState({password: e.target.value})} из входов в коде ниже, ошибка исчезает.
Любойидеи, почему следующий код не работает?
import { connect } from 'react-redux';
import { withCookies } from 'react-cookie'
class LoginForm extends Component {
constructor(props) {
super(props);
this.state = {
username: '',
password: ''
};
}
render() {
let {username, password} = this.state;
let { cookies, allCookies, isLoginPending, isLoginSuccess, loginError} = this.props;
cookies.set('username', 'Ross', { path: '/', secure: true, httpOnly: true});
console.log(cookies.get('username'));
return (
<form name="loginForm" onSubmit={this.onSubmit}>
<div className="form-group-collection">
<div className="form-group">
<label>Username:</label>
<input type="text" name="username" onChange={e => this.setState({username: e.target.value})} value={username}/>
</div>
<div className="form-group">
<label>Password:</label>
<input type="password" name="password" onChange={e => this.setState({password: e.target.value})} value={password}/>
</div>
</div>
</form>
)
}
}
const mapStateToProps = (state) => {
return {
isLoginPending: state.isLoginPending,
isLoginSuccess: state.isLoginSuccess,
loginError: state.loginError,
};
}
export default withCookies(connect(mapStateToProps, null)(LoginForm));```