Блог

Главная - Вопросы по программированию - React native useState и оператор return не работают вместе

React native useState и оператор return не работают вместе

#javascript #reactjs #react-native

#javascript #reactjs #react-native

Вопрос:

Здесь всякий раз, когда я нажимаю на значок, он ничего не показывает. Предполагается, что он показывает некоторый текст, и при повторном нажатии он должен скрывать текст. Я использую react native.

 import React, { useState } from 'react';
import { View, Text, StyleSheet, Button, Image, TouchableOpacity} from 'react-native';
import FontAwesome from 'react-native-vector-icons/FontAwesome';

export default function Edit(props, { navigation }) {
  const [slide, setSlide] = useState(false);
  const toggle = () => {
    setSlide(!slide);
    console.log('clicked');
    return (
      <View>
        <Text>random</Text>
        <Text>random</Text>
      </View>
    );
  }
return (
  <View>
    <FontAwesome name="sliders" size={30} color="#000" onPress={() => toggle()}/>
  </View>
}

После тестирования единственное, что он показывает, это сообщение console.log (‘clicked’). Больше ничего не отображается. Также значок отображается нормально. Все работает, кроме и содержимого в этих тегах.

Комментарии:

1. вам не хватает закрытия ) после </View>

2. Я забыл указать при написании вопроса. в реальном коде я проверил и увидел это там, но в любом случае спасибо

Ответ №1:

Вместо того, чтобы возвращать View из вашей toggle функции, вам действительно нужно отобразить этот вид вашей иерархии представлений (например, то, что возвращается из вашего компонента).

Я продемонстрировал в примере, используя троичное выражение — если slide есть true , оно отображается, в противном случае нет.

 export default function Edit(props, { navigation }) {
  const [slide, setSlide] = useState(false);
  const toggle = () => {
    setSlide(!slide);
    console.log('clicked');
  }
return (
  <View>
    <FontAwesome name="sliders" size={30} color="#000" onPress={() => toggle()}/>
    {slide ? <View>
        <Text>random</Text>
        <Text>random</Text>
      </View> : null}
  </View>
  );
}

Пример закуски: https://snack.expo.io/7lVezwWs7

Метки: