Блог

Я создал приложение в react native. Мое приложение выполняет вызовы API на мой веб-сервер, а затем отображает информацию на основе этого. Проблема в том, что я впервые загружаю этот экран… Я получаю экран загрузки, и информация отображается так, как она должна отображаться, но когда я покидаю экран, а затем возвращаюсь к экрану, он ничего не показывает, и мой массив, содержащий элементы, пуст, поэтому я думаю, что у меня проблемы с вызовом API, когда я покидаю экран, а затем возвращаюсь к экрану.вернитесь.

Я использую React navigation 5 в своем приложении.

 export default function ({ navigation }) {
  const [openQueries, setOpenQueries] = useState([]);
  const [isLoading, seIsLoading] = useState(true);
  const open_queries = [];

  function getOpenQueries() {
    var retrieveData = async () => {
      try {
        var value = await AsyncStorage.getItem("user");
        var data = JSON.parse(value);
        return data.user._id;
      } catch (error) {
        alert(error);
      }
    };
    retrieveData().then((user) => {
      fetch(URL   "/api/contact/open_queries", {
        method: "POST",
        body: "user="   user   "amp;status=open",
        headers: { "Content-type": "application/x-www-form-urlencoded" },
      })
        .then((response) => {
          return response.json();
        })
        .then((responseJson) => {
          if (responseJson.error === null) {
            setOpenQueries(responseJson.open_queries);
            seIsLoading(false);
          }
        });
    });
  }

  getOpenQueries();

  openQueries.forEach((query) => {
    open_queries.push(
      <TouchableOpacity
        onPress={() =>
          navigation.navigate("Chat", {
            id: query._id,
            title: query.title,
            query: query,
            showInput: true,
          })
        }
      >
        <View style={styles.inboxItem}>
          <Text style={styles.inboxTitle}>{query.title}</Text>
          <Text style={styles.inboxSubtext}>
            {query.chats[query.chats.length - 1].chat}
          </Text>
          <View style={styles.lineBreak}></View>
        </View>
      </TouchableOpacity>
    );
  });


  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.title}>Contacts</Text>
      <TouchableOpacity
        style={styles.button}
        onPress={() => navigation.navigate("NewQuery")}
      >
        <Text style={styles.text}>Start a new query</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => navigation.navigate("ClosedQueries")}>
        <View style={styles.button}>
          <Text style={styles.text}>Closed Queries</Text>
        </View>
      </TouchableOpacity>
      <Text style={styles.subTitle}>Open Queries</Text>
      {isLoading ? (
        <View style={styles.loader}>
          <Code />
        </View>
      ) : (
        <ScrollView style={{ paddingTop: 10 }}>
          {openQueries.length > 0 ? (
            open_queries
          ) : (
            <Text style={styles.noQuery}>No Open Queries found</Text>
          )}
        </ScrollView>
      )}
      <ScrollView></ScrollView>
      <BottomNavigation navigation={navigation} active={"contact"} />
    </SafeAreaView>
  );
}
  

Попробуйте этот способ

 export default function ({ navigation }) {
  const [openQueries, setOpenQueries] = useState([]);
  const [isLoading, seIsLoading] = useState(true);
  const [open_queries_views, setOpenQueriesViews] = useState([]);

  function getOpenQueries() {
    ....
  }

  // Similar to componentDidMount
  useEffect(() => {
    getOpenQueries();
  });

  function renderViews(){
    const open_queries = [];

    openQueries.forEach((query) => {
     open_queries.push(
      <TouchableOpacity> ... </TouchableOpacity>
    );
   });
   setOpenQueriesViews(open_queries); // set state here to auto reflect on view
  }

  return (
    <SafeAreaView style={styles.container}>
      ....
        <ScrollView style={{ paddingTop: 10 }}>
          {open_queries_views.length > 0 ? (
            open_queries_views
          ) : (
            <Text style={styles.noQuery}>No Open Queries found</Text>
          )}
        </ScrollView>
      .....
    </SafeAreaView>
  );
}