Я пытаюсь установить ошибку состояния со строковым значением внутри функции PostData с помощью команды this.setState (), как показано ниже, но при отладке я вижу, что 'this' не определено, и поэтому setState не присваивает строку переменной ошибки в state, как и this, теряет область видимости внутри функции Postdata.
Я видел похожие вопросы в StackOverflow, в которых проблема решается путем правильной привязки функции, применяющей setState, это не мой случай, поскольку регистрация функции связана.
class Signup extends Component {
constructor(props) {
super(props);
this.state = {
username: '',
password: '',
confirmPassword: '',
email: '',
name: '',
error: '',
redirectToReferrer: false
};
this.signup = this.signup.bind(this)
this.onChange = this.onChange.bind(this)
}
signup() {
PostData('signup', this.state).then((result) => {
let responseJson = result
console.info(responseJson.message)
if (responseJson.message.indexOf("registration success") > -1) {
sessionStorage.setItem('userData', JSON.stringify(responseJson))
this.setState({ redirectToReferrer: true });
} else {
let string = responseJson.message[0]
this.setState({ error: string })
}
});
}
onChange(e) {
this.setState({ [e.target.name]: e.target.value })
}
render() {
if (this.state.redirectToReferrer || sessionStorage.getItem('userData')) {
return (<Redirect to = {'/home'} />)
}
return (
<div className = "row " id = "Body">
<div className = "medium-5 columns left">
<h4>Signup</h4>
<label>Email</label>
<input type = "text" name = "email" placeholder = "Email" onChange = {this.onChange} />
<label>Name</label>
<input type = "text" name = "name" placeholder = "Name" onChange = {this.onChange} />
<label>Username</label>
<input type = "text" name = "username" placeholder = "Username" onChange = {this.onChange} />
<label>Password</label>
<input type = "password" name = "password" placeholder = "Password" onChange = {this.onChange} />
<label>Confirm Password</label>
<input type = "password" name = "confirmPassword" placeholder = "Confirm Password" onChange = {this.onChange} />
<input type = "submit" className = "button" value = "Sign Up" onClick = {this.signup} />
<a href = "/login">Login</a>
<input name = "error" onChange = {this.onChange}></input>
</div>
</div>
);
}
}
export default Signup





Это может иметь какое-то отношение к объему вашей функции. Ваш this.setState снабжен другой стрелочной функцией. Вы можете обернуть свой setState в другую функцию, но поместить на верхний уровень с классом.
Не могли бы вы попробовать ввести стрелочную функцию для вашего события onClick.