Question

我很难弄清楚为什么我使用此代码返回undefined输入。 Button, Card, CardSection组件以相同的方式导出/导入。

如果我注释掉<Input/>标记，则LoginForm中的其余组件会正常呈现。

非常感谢任何帮助！

Input.js - 无效

import React from 'react';
import { Text, TextInput, View } from 'react-native';

const Input = ({ label, value, onChangeText }) => {
    return (
        <View>
            <Text>{label}</Text>
            <TextInput
                value={value}
                onChangeText={onChangeText}
                style={{ height:20, width:100 }}
            />
        </View>
    );
};

export { Input };

Button.js - 工作

const Button = ({ whenPressed, children }) => {

    const { buttonStyle, textStyle } = styles;

    return (
        <TouchableOpacity onPress={whenPressed} style={buttonStyle}>
            <Text style={textStyle}>
                {children}
            </Text>
        </TouchableOpacity>
        );
};

export { Button };

LoginForm.js

import React, { Component } from 'react';
import { View } from 'react-native';
import { Button, Card, CardSection, Input } from './';

class LoginForm extends Component {

    state = { text: '' };

    render() {
        return(
            <Card>
                <CardSection>
                    <Input
                        value={this.state.text}
                        onChangeText={text=> this.setState({ text })}
                    />
                </CardSection>
                <CardSection/>
                <CardSection>
                    <Button style={styles.buttonStyle}>LOGIN</Button>
                </CardSection>
            </Card>
        );
    }
}

Answer 1

它以undefined的形式返回，因为它永远不会导出到保存所有导出到App的index.js文件中。

在示例代码中，您在<Input/>中显示了Index.js组件，但LoginForm.js中的导入<Input/导入./.

元素类型无效：期望得到的字符串/对象：未定义

1 个答案: