React Native 尝试调用子组件时出错

vltsax25  于 2023-02-05  发布在  React
关注(0)|答案(1)|浏览(105)

我正在为我的应用构建一个RegisterScreen,我有一个名为'LogResContainer'的子组件,其中有一个在登录屏幕和注册屏幕之间共享的组件。
问题是,我认为我把一切都称为它应该被称为,我不知道什么是错的了。
下面是RegisterScreen.js:

import { 
    KeyboardAvoidingView,
    StyleSheet,
    Text, 
    TextInput, 
    TouchableOpacity, 
    View 
} from 'react-native'
import React, {useState}from 'react'
import { createUserWithEmailAndPassword } from 'firebase/auth';
import { auth } from '../firebase.js';
import { styles } from '../styles/styles.js';
import {LogResContainer} from './LogResContainer.js';

const RegisterScreen = () => {
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");

    const handleSignup = () => {
        createUserWithEmailAndPassword(auth, email, password)
        .then(userCredential => {
            const user = userCredential.user;
            console.log(user.email);
        })
        .catch(error => alert(error.message));
    }

    console.log(setEmail);
    console.log(setPassword);
    console.log(handleSignup);
    console.log("Registrar");

  return (
    <LogResContainer 
        setEmail={setEmail}
        setPassword={setPassword}
        type='Registrar'
        func={handleSignup}
    />
    );
}

export default RegisterScreen

下面是LogResContainer.js:

import {styles} from '../styles/styles.js';

export default LogResContainer = ({setEmail, setPassword, type, func}) => {

  return (
    <KeyboardAvoidingView style={styles.container} behavior="padding">
      <View style={styles.inputContainer}>
        <TextInput
          placeholder="Email"
          value={email}
          onChangeText={(text) => setEmail(text)}
          style={styles.input}
        />
        <TextInput
          placeholder="Password"
          value={password}
          onChangeText={(text) => setPassword(text)}
          style={styles.input}
          secureTextEntry
        />
      </View>

      <View style={styles.buttonContainer}>
        <TouchableOpacity onPress={func} style={styles.button}>
          <Text style={styles.buttonText}>{type}</Text>
        </TouchableOpacity>
      </View>
    </KeyboardAvoidingView>
  );
};

我研究了 prop 文档,看了很多youtube视频,但是我已经精疲力尽了,不知道我错过了什么。

mlmc2os5

mlmc2os51#

LogResContainer导出为默认导出,但尝试将其作为命名导出导入。
将导出更改为命名导出:

export const LogResContainer = () => <>"I am a named export"</>

或者更改导入以导入默认值:

import LogResContainer from "./LogResContainer.js"

如果您不知道命名导出和默认导出之间的区别,请阅读此处:https://www.geeksforgeeks.org/what-is-export-default-in-javascript/
并请添加您得到的错误,以便我们可以更好地帮助您。

相关问题