React Native игнорирует изменение состояния - PullRequest
Новая
       76

React Native игнорирует изменение состояния

0 голосов
/ 11 ноября 2018

Пожалуйста, объясните, почему это не работает.Я пытаюсь заменить один элемент другим при нажатии кнопки в React, и, согласно всей документации, то, что я делаю, должно работать.Однако React полностью игнорирует изменения состояния и отказывается повторно визуализировать элемент.Вот мой файл: 

import React, {Component} from 'react';
import {View, Text, TextInput, TouchableOpacity} from 'react-native';
import styles from '../styles';
import User from '../models/User';
export default class SignIn extends Component {
    constructor(props){
        super(props);
        this.state = {
            email: '',
            password: '',
            signIn: '',
            errorMessage: null,
            signUp: true
        }
    }
    signIn(){
        var err = e => this.setState({errorMessage: e.message});
        var next = u => this.props.navigation.push('Details');
        User.login(this.state.email, this.state.password, err, next);
    }
    signUp(){
        var err = e => this.setState({errorMessage: e.message});
        var next = _ => this.props.navigation.push('Details');
        var user = new User(this.state.email, this.state.password);
        user.save(err, next);
    }
    render(){
        return (
            <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
                <View style={{flexDirection: 'row', width: 300, justifyContent: 'center'}}>
                    <TouchableOpacity onPress={_ => this.setState({signUp: true})} style={[styles.navButton, styles.tabsButton]}>
                        <Text style={[styles.buttonText, styles.tabs]}>Sign Up</Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={_ => this.setState({signUp: false})} style={[styles.grey, styles.tabsButton]}>
                        <Text style={[styles.greyText, styles.tabs]}>Sign In</Text>
                    </TouchableOpacity>
                </View>
                {this.state.signUp && <View>
                    <Text style={{color: 'red'}}>{this.state.errorMessage}</Text>
                    <TextInput 
                        placeholder={'Email'} 
                        style={styles.input} 
                        value={this.state.email} 
                        onChangeText={(email) => this.setState({email})}
                    />
                    <TextInput 
                        placeholder={'Password'} 
                        style={styles.input} 
                        secureTextEntry={true} 
                        onChangeText={(password) => this.setState({password})}
                    />
                    <TouchableOpacity style={styles.navButton}>
                        <Text style={styles.buttonText}>Sign Up</Text>
                    </TouchableOpacity>      
                </View>}  
                {!this.state.signUp && <View>
                    <Text style={{color: 'red'}}>{this.state.errorMessage}</Text>
                    <TextInput 
                        placeholder={'Email'} 
                        style={styles.input} 
                        value={this.state.email} 
                        onChangeText={(email) => this.setState({email})}
                    />
                    <TextInput 
                        placeholder={'Password'} 
                        style={styles.input} 
                        secureTextEntry={true} 
                        onChangeText={(password) => this.setState({password})}
                    />
                    <TouchableOpacity style={[styles.navButton]}>
                        <Text style={styles.buttonText}>Sign Up</Text>
                    </TouchableOpacity>       
                </View>}
            </View>
        )
    }
}

Кнопка «Вход в систему» ​​вверху должна изменить состояние и привести к тому, что появится форма «Вход в систему» ​​и исчезнет форма «Регистрация», а кнопка «Регистрация» должна сделать обратное.,Если я console.log состояние после изменения, оно изменилось, но больше ничего не происходит.Что здесь происходит?Вся документация показывает, что вы можете сделать это, но у меня это не работает.Я запускаю приложение на телефоне Android через Expo.

1 Ответ

0 голосов
/ 12 ноября 2018 

{this.state.signUp 
  ? <View>
      <Text style={{color: 'red'}}>{this.state.errorMessage}</Text>
      <TextInput 
          placeholder={'Email'} 
          style={styles.input} 
          value={this.state.email} 
          onChangeText={(email) => this.setState({email})}
      />
      <TextInput 
          placeholder={'Password'} 
          style={styles.input} 
          secureTextEntry={true} 
          onChangeText={(password) => this.setState({password})}
      />
      <TouchableOpacity style={styles.navButton}>
          <Text style={styles.buttonText}>Sign Up</Text>
      </TouchableOpacity>      
    </View>  
  : <View>
      <Text style={{color: 'red'}}>{this.state.errorMessage}</Text>
      <TextInput 
          placeholder={'Email'} 
          style={styles.input} 
          value={this.state.email} 
          onChangeText={(email) => this.setState({email})}
      />
      <TextInput 
          placeholder={'Password'} 
          style={styles.input} 
          secureTextEntry={true} 
          onChangeText={(password) => this.setState({password})}
      />
      <TouchableOpacity style={[styles.navButton]}>
          <Text style={styles.buttonText}>Sign Up</Text>
      </TouchableOpacity>       
    </View>
}

Если это не сработает, может быть, стили?

...