Syntheti c ошибка события при попытке ввода текста

Question

Я создаю страницу входа в реагировать на родной. Всякий раз, когда я что-то набираю в поле имени пользователя, я получаю предупреждение: Событие syntheti c используется повторно из соображений производительности , и значение тега Text не изменяется по желанию. Код, который я написал, выглядит следующим образом:

export default class LoginScreen extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            username: '',
            password: ''
        }
    }

    login = async () => {
        // const result = await appLogin(this.state.userName, this.state.password);
        console.log(`${this.state.username} ${this.state.password}`);
    };

    render() {
        return <View style={loginStyles.container}>
            <ImageBackground
                source={require('../../../assets/images/login.jpg')}
                style={loginStyles.backgroundImage}>
                <View style={loginStyles.titleContainer}>
                    <Text style={{fontSize: 40, color: 'grey', paddingVertical: 40}}>{this.state.username}</Text>
                </View>
                <View style={loginStyles.nestedContainer}>
                    <TextInput
                        placeholder={'username / email'}
                        style={[style.inputStyle, style.colorBlue]}
                        onChange={(username) => this.setState(username)}
                    />
                    <TextInput
                        placeholder={'password'}
                        textContentType="password"
                        secureTextEntry={true}
                        autoCapitalize="none"
                        autoCorrect={false}
                        style={[style.inputStyle, style.colorBlue]}
                        onChange={(password) => this.setState(password)}
                    />
                    <CustomRoundedButton
                        text={'Login'}
                        buttonStyle={[style.bgPrimary]}
                        onPress={this.login}
                        textStyle={[style.text20, {color: 'white'}]}
                    />
                </View>
            </ImageBackground>
        </View>
    }
};

Вот скриншот с этим предупреждением. Пожалуйста, помогите мне найти решение этой проблемы.

Answer 1

Обработчику TextInput onChange передается собственный объект события, который вы назвали username в анонимной функции. Обновления состояния реагирования являются асинхронными, поэтому к тому времени, когда реакция обновляет состояние, событие уже давно прошло (было помещено обратно в пул событий).

Используйте взамен onChangeText, оно получает обновленное значение ввода текста.

onChangeText={(username) => this.setState(username)}

Обновите все ваши обратные вызовы изменения ввода для использования onChangeText.

Answer 2

Ваш код:

onChange={(username) => this.setState(username)}

Вы должны изменить это:

onChangeText={(username) => this.setState({ username })}

Answer 3

Замените

 onChange={(username) => this.setState(username)}

на

onChangeText={(username) => this.setState({ username })}

и

onChange={(password) => this.setState(password)}

на

onChangeText={(password) => this.setState({ password })}

Надеюсь, это поможет!