Question

我有一个文件check.js，供我的导航员检查是否未设置名称，它应显示addNameScreen和phoneNumberScreen组件，但当我使用道具获取值时的布尔值返回true，但是我需要将其设置为false，以便在用户添加其名称时将check.js中的值更改为true。

我的问题是：返回值true到底是怎么回事？以及当用户添加名称后如何返回值以更改check.js中的状态？

Check.js

import React from 'react';
import {StyleSheet, Text, View } from 'react-native';
import MainNav from './MainNav';
import addNameScreen from '../screens/auth/addNameScreen';
import PhoneNumberScreen from '../screens/auth/PhoneNumberScreen';


export default class Check extends React.Component{

  constructor(props){
     super(props);
     this.state = {
        isNameSet: false, 
        isPhoneNumberSet: false,
     }
  }

render(){

     if(this.state.isNameSet == false){
        return <AddNameScreen isNameSet />
     }else if(this.state.isPhoneNumberSet == false){
         return <PhoneNumberScreen isPhoneNumberSet/>
     }else{
        return <MainNav />
     }
}  
}

export {Check};

AddNameScreen.js

import React from 'react'; 
import {StyleSheet, Text, TextInput, View, Alert, Image, 
KeyboardAvoidingView, Button} from 'react-native';

import * as firebase from 'firebase';
import {Input} from './../../components/input'; 
import MainScreen from '../MainScreen';
import PhoneNumberScreen from './PhoneNumberScreen';

export default class AddNameScreen extends React.Component {

constructor(){
    super();
    this.state = {
        currentUser: '', 
        Name: '',
        error: '',
    };
}
componentDidMount() {
    var currentUser = firebase.auth().currentUser;
    this.setState({ currentUser })

    if (currentUser != null) {
        email = currentUser.email;
    }

}

addName = () => {

    if(this.state.Name != ""){
        var Name = this.state.Name;

        firebase.auth().onAuthStateChanged(function(currentUser) {
            if (currentUser) {
              // User is signed in.
              firebase.database().ref('users/'+uid).set(
                {
                   Name: Name,
                   email: email,
                }
                ).then(() =>{ // name has been added.
                    this.updateName;
                    return <Check/>
                }).catch((error) => {
                    Alert.alert('Unknown error!');
                });
            } else {
              // User is signed out.
              // ...
            }
          });

    }else{
        this.setState({ error: 'Please enter your name!' }, () => {
            this.state.error; 
        });
    }
}
render(){

    return (
        <View style={[ styles.container, {flex: 1, backgroundColor: 'rgb(75, 2, 112)',}]}>
            <KeyboardAvoidingView behavior="padding" enabled>
                <View style={styles.container}>
                    <Input 
                            placeholder='Enter your name'
                            placeholderTextColor='rgba(255,255,255,0.4)'
                            label='Enter your name?'
                            onChangeText={Name => this.setState({Name})}
                            value={this.state.Name}
                    />

                    <Button
                        title="Next"
                        color="#fff"
                        accessibilityLabel="Next"
                        onPress={this.addName}
                    /> 
                    <Text>{String(this.props.isNameSet)}</Text> //this print true
                    <Text>{this.state.error}</Text>
                </View>
            </KeyboardAvoidingView>
        </View>
    )
}
}

const styles = StyleSheet.create({
   container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
},
});
export {AddNameScreen};

Answer 1

感谢您的提问。我在您的代码中看到您在Check.js中声明了道具

<MyComponent somePropName />

默认情况下，这会将somePropName设置为true，您应该像这样将prop设置为一个值（通过使用状态）：

<AddNameScreen isNameSet={this.state.isNameSet} />

要在需要更新父组件中的状态时将值传回，例如，将值从回传给您，则需要使用可以从调用的回调函数。

操作如下：

<AddNameScreen isNameSet={this.state.isNameSet} updateName={this.updateName} />

updateName应该是Check中的一个函数，用于更新其状态，例如：

updateName = (name) => {
    this.setState({isNameSet: true})
}

然后可以通过this.props.updateName（）调用props值，在AddNameScreen中使用此函数。

React文档对如何进行通常称为“提升状态”的“状态提升”进行了更好的解释，可以在以下位置找到：https://reactjs.org/docs/lifting-state-up.html

雅各布

为什么布尔在本机反应中通过this.props返回True

1 个答案: