Пользовательский компонент ввода в реагирующем собственном вводе не работает должным образом

Question

Я пытаюсь создать пользовательский компонент ввода с помощью onChangeText, но всякий раз, когда я начинаю вводить текст в поле textInput, я получаю сообщение об ошибке.Я проверял код много раз, и все выглядит хорошо для меня.

 import React from "react";
    import { TextInput, StyleSheet } from "react-native";

    const defaultInput = props => (
            <TextInput
            underlineColorAndroid="transparent"
            {...props}
            style={[styles.input, props.style]}
          />
        )
    const styles = StyleSheet.create({
      input: {
        width: "100%",
        borderWidth: 1,
        borderColor: "#eee",
        padding: 5,
        marginTop: 8,
        marginBottom: 8
      }
    });

    export default defaultInput;

Это мой подкомпонент, где я использую свой пользовательский компонент.

import React, { Component } from "react";
import { View, TextInput, Button, StyleSheet } from "react-native";
import DefaultInput from "../UI/DefaultInput/DefaultInput";
const placeInput = props =>(
    <DefaultInput
      placeholder="Place Name"
      value={props.placeName}
      onChangeText={props.onChangeText}
    />
  )
export default placeInput;

Это экран, на котором я использую свой подкомпонент.

import React, { Component } from 'react'
import { Text, View, TextInput, Button, StyleSheet, ScrollView, Image } from 'react-native'
import { connect } from 'react-redux'
import placeImage from '../../asset/pic.jpg'
import PlaceInput from '../../component/PlaceInput/PlaceInput'
import { addPlace } from '../../store/actions/index'
import { Navigation } from 'react-native-navigation'
// import DefaultInput from '../../component/UI/DefaultInput/DefaultInput'
import HeadingText from '../../component/UI/HeadingText/HeadingText'
import MainText from '../../component/UI/MainText/MainText'
import PickImage from '../../component/PickImage/PickImage'
import PickLocation from '../../component/PickLocation/PickLocation'
class SharePlace extends Component {
    state={
      placeName:""
    }
    constructor(props) {
        super(props);
        this.props.navigator.setOnNavigatorEvent(this.OnNavigatorEvent);
    }
    placeNameChangedHandler = val => {
        this.setState({
          placeName: val
        });
      };
    OnNavigatorEvent = (event) => {
        console.log(event);
        if (event.type === "NavBarButtonPress") {
            if (event.id === "sideDrawerToggle") {
                this.props.navigator.toggleDrawer({
                    side: "left"

                })
            }

        }
    }

    placeAddedHandler = () => {
        if(this.state.placeName.trim() !== "")
        {
            this.props.onAddPlace(this.state.placeName);
        }

           }
    render() {
        return (
            // <ScrollView contentContainerStyle={styles.conatiner}>
            <ScrollView>
                <View style={styles.conatiner}>
                    <MainText>
                        <HeadingText>Share a place with us!</HeadingText>
                    </MainText>
                    <PickImage />
                    <PickLocation />
                    <PlaceInput
                     placeName={this.state.placeName}
                     onChangeText={this.placeNameChangedHandler}
                       />
                    <View style={styles.button}>
                        <Button title="share the place" onPress={this.placeAddedHandler} />
                    </View>
                </View>
            </ScrollView>
        );
    }

}

const styles = StyleSheet.create({
    conatiner: {
        flex: 1,
        alignItems: "center"
    },
    placeholder: {
        borderWidth: 1,
        borderColor: "black",
        backgroundColor: "#eee",
        width: "80%",
        height: 150
    },
    button: {
        margin: 8

    },
    imagePreview: {
        width: "100%",
        height: "100%"
    }

})

const mapDispatchToProps = dispatch => {
    return {
        onAddPlace: (placeName) => dispatch(addPlace(placeName))
    }
}

export default connect(null, mapDispatchToProps)(SharePlace)

Это ошибка, которую я получаю.

ExceptionsManager.js: 63 Нарушение инварианта: TextInput (...): Ничего не возвращено при рендеринге.Обычно это означает, что отсутствует инструкция возврата.Или, чтобы ничего не отобразить, верните ноль.

Эта ошибка находится по адресу:

    in TextInput (at DefaultInput.js:5)
    in defaultInput (at PlaceInput.js:7)
    in placeInput (at SharePlace.js:60)
    in RCTView (at View.js:60)
    in View (at SharePlace.js:54)
    in RCTScrollContentView (at ScrollView.js:791)
    in RCTScrollView (at ScrollView.js:887)
    in ScrollView (at SharePlace.js:53)
    in SharePlace (created by Connect(SharePlace))
    in Connect(SharePlace) (at Navigation.js:83)
    in Provider (at Navigation.js:82)
    in _class2 (at renderApplication.js:33)
    in RCTView (at View.js:60)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:60)
    in View (at AppContainer.js:122)
    in AppContainer (at renderApplication.js:32)

Answer 1

ваш код работает нормально, как я его запустил, может быть, у вас есть проблемы с импортом PlaceInput или DefaultInput:

import React, { Component } from 'react';
import { View, Text, FlatList, ScrollView,TextInput, Image,StyleSheet } from 'react-native';

export default class Test extends Component {
    constructor(props) {
        super(props);

        this.state = {
            placeName: ""
        }
    }

    placeNameChangedHandler = val => {
        this.setState({
            placeName: val
        });
    };
    
    render() {
        return (
            <View>
                <PlaceInput
                    placeName={this.state.placeName}
                    onChangeText={this.placeNameChangedHandler}
                />
            </View>

        );
    }
}

const PlaceInput = props => (
    <DefaultInput
        placeholder="Place Name"
        value={props.placeName}
        onChangeText={props.onChangeText}
    />
)

const DefaultInput = props => (
    <TextInput
        underlineColorAndroid="transparent"
        {...props}
        style={[styles.input, props.style]}
    />
)
const styles = StyleSheet.create({
    input: {
        width: "100%",
        borderWidth: 1,
        borderColor: "#eee",
        padding: 5,
        marginTop: 8,
        marginBottom: 8
    }
});