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

Im trying to navigate to another page on authorization. But everytime I try to login it pops up with warning (Cannot update during an existing state transition.Render method must be a pure function of props and state). Could you check with the code below.

我试图导航到授权的另一页。但每次我尝试登录时都会弹出警告（在现有状态转换期间无法更新.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>
    );
}

**for convenience if added the loginform component below **

**为方便起见，如果添加了以下的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="[e-mail]"
                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;

1 个解决方案

#1

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

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

Lots of things are wrong with your example but nothing exactly points to why you're getting a re-render. I don't know what your LoginForm component looks like but I suspect it's the cause.

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

A couple things: you do not need to use a switch statement when evaluating something that can only be true or false. If you want to use it anyway that's fine, but it's very unusual.

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

You have unreachable code after the switch statement. The only possible outcomes are true or false for that switch statement. So, default will never run, and the code below the switch statement will never run. What I did was reduce your example code to the only possible branches it could be taking. If you're still getting re-renders with this render function you need to post the full component as well as the LoginForm component to help troubleshoot.

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