При условном рендеринге двух компонентов, каждый из которых содержит реактивные элементы ‹Input›, активация одного из них вызывает исключение/не-рендеринг компонента

Это родительский компонент. Я условно визуализирую и основываюсь на onPress, который изменяет состояние signInActive на true/false.

     <View>
    {signInActive ? (
      <View>
        <SignIn />
      </View>
    ) : (
      <View>
        <Registration />
      </View>
    )}
  </View>

Это рабочий компонент, который отображается для истинного случая выше: компонент SignIn

 <View style={styles.inputContainer}>
    <Input
      autofocus
      placeholder="Email"
      // value={email}
      // onChangeText={(e) => setEmail(e.target.value)}
    />
    <Input
      style={styles.bottomInput}
      secureTextEntry
      placeholder="Password (8 or more characters)"
    />
  </View>

Это компонент без рендеринга из компонента регистрации ложного условного случая... он точно такой же.

<View style={styles.inputContainer}>
    <Input
      autofocus
      placeholder="Email"
      // value={email}
      // onChangeText={(e) => setEmail(e.target.value)}
    />
    <Input
      style={styles.bottomInput}
      secureTextEntry
      placeholder="Password (8 or more characters)"
    />
  </View>

Ошибка: Исключение компонента: недопустимый тип элемента: ожидается строка (для встроенного компонента) или класс/функция, но получил: undefined. Вероятно, вы забыли экспортировать компонент из файла, в котором он определен.

Родительский компонент отображает компоненты ‹View, Text, TouchableOpacity и Button, но не отображает ввод. Я попытался удалить из истинного рендеринга, и ложный рендеринг все еще имеет исключение компонента.


person cshdev    schedule 28.05.2021    source источник


Ответы (1)


Решение. Импортированный ввод из react-native-elements не был правильно деструктурирован в операторе импорта. Импортировать вместо {Импортировать}

person cshdev    schedule 28.05.2021