Реагировать - невозможно прочитать свойство setState из undefined

Я пытаюсь установить ошибку состояния со строковым значением внутри функции 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" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
378
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

Не могли бы вы попробовать ввести стрелочную функцию для вашего события onClick.

Другие вопросы по теме