时间戳

首页 > 解决方案 > 为什么布尔值在本机反应中通过this.props返回True

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

问题描述

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

我的问题是：它到底是如何返回 true 的？当用户添加名称时，我如何能够返回值以更改 check.js 中的状态？

检查.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};

标签： javascriptreactjsreact-native

解决方案

谢谢你的问题。我在您的代码中看到您在 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

雅各布。

推荐阅读