Question

我试图导航到授权的另一个页面。但每次我尝试登录时都会弹出警告（在现有状态转换期间无法更新.Render方法必须是道具和状态的纯函数）。你能查看下面的代码吗？

    renderContent(){
    switch(this.state.loggedIn){
        case true:
        return(this.props.navigation.navigate('tabScreen'));
        case false:
        return <LoginForm />;
        default:
        return (<Spinner size="large"/>);
    }

    if(this.state.loggedIn){
        return(this.props.navigation.navigate('tabScreen'));
    }
    return <LoginForm /> 
}


render(){
    return(
        <View style={styles.container}>
            {this.renderContent()}
        </View>
    );
}

**为方便起见，如果在**

下面添加了loginform组件

import React, {Component} from  'react';
import {Text,View,TextInput} from 'react-native';
import firebase from 'firebase';
import {Button,Card,CardSection,Input,Spinner} from '../common';

class LoginForm extends Component {
  state = {
    email:'',
    password:'',
    error:'',
    loading:false 
};

onButtonPress(){
    const {email,password} = this.state;

    this.setState({error: '',loading: true});

    firebase.auth().signInWithEmailAndPassword(email,password)
        .then(this.onLoginSuccess.bind(this))
        .catch(()=>{

    firebase.auth().createUserWithEmailAndPassword(email,password)
            .then(this.onLoginSuccess.bind(this))
            .catch(this.onLoginFail.bind(this)); 
        });
    }

onLoginFail(){
    this.setState({
        loading:false,
        error:'Authentication Failed'
    });
}

onLoginSuccess(){
    this.setState({
        email:'',
        password:'',
        loading:false,
        error:''
    });

}

renderButton(){
    if(this.state.loading){
        return <Spinner size="large"/>;
    }

    return (
        <Button onPress={this.onButtonPress.bind(this)}>
            Log In
        </Button>
    );
}

render(){
    return(
        <Card>
            <CardSection>
                <TextInput
                style={styles.input} 
                label="Email"
                placeholder="user@mail.com"
                value={this.state.email}
                onChangeText={email=>this.setState({email})}/>
            </CardSection>
            <CardSection>
                <TextInput
                style={styles.input} 
                secureTextEntry={true}
                label="Password"
                placeholder="password"
                value={this.state.password}
                onChangeText={password=>this.setState({password})}/>
            </CardSection>

            <Text style={styles.errorTextStyle}>
                {this.state.error}
            </Text>

            <CardSection>
                {this.renderButton()}    
            </CardSection>
        </Card>
     );
    }
  }
 //styles have been excluded to limit scope of discussion here

 export default LoginForm;

Answer 1

renderContent(){
  if (this.state.loggedIn) {
    this.props.navigation.navigate('tabScreen');
  } else {
    return <LoginForm />;
  }
}

render(){
    return(
        <View style={styles.container}>
            {this.renderContent()}
        </View>
    );
}

你的例子有很多问题，但没有确切地指出你为什么要重新渲染。我不知道你的LoginForm组件是什么样的，但我怀疑它是什么原因。

有几件事：在评估只能是真或假的东西时，你不需要使用switch语句。无论如何你想使用它都很好，但这很不寻常。

switch语句后有无法访问的代码。对于该switch语句，唯一可能的结果是true或false。因此，默认将永远不会运行，并且switch语句下面的代码永远不会运行。我所做的是将您的示例代码减少到它可能采用的唯一可能的分支。如果您仍然使用此渲染功能重新渲染，则需要发布完整组件以及LoginForm组件以帮助进行故障排除。

为什么这次重新发生多次？

1 个答案: