React Native 忽略状态变化

Question

请解释为什么这不起作用。我试图在 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 phone 上的应用程序。

Answer 1

{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>
}

如果这行不通，也许样式？

React Native 忽略状态变化

React Native is ignoring state change

reactjs

react-native

react-state-management

react-state