Блог

Главная - Вопросы по программированию - Функция React Native — Вызов функции перед рендерингом чего-либо

Функция React Native — Вызов функции перед рендерингом чего-либо

#react-native

Вопрос:

У меня есть этот собственный код React, и я хотел бы вызвать функцию getPosts перед отображением экрана. Как мне это сделать?

 import React, {useState} from 'react';
import {FlatList, StyleSheet, SafeAreaView} from 'react-native';
import PostGoalCard from '../components/PostGoalCard';
import Loader from '../components/Loader';
import axios from 'axios';

const PostsScreen = ({navigation}) => {
  const [loading, setLoading] = useState(false);
  const [data, setData] = React.useState([])
  const url = 'http://10.0.2.2:8000';

  const getPosts = () => {
    axios
      .get(`${url}/posts`)
      .then(response => {
        console.log(response)
        setData(response.data);
      })
      .catch(error => {
        console.log(JSON.stringify(error));
      });
  } 

  return (
    <SafeAreaView style={styles.container}>
      <Loader loading={loading} />
      <FlatList
        style={styles.flatlist}
        data={data}
        keyExtractor={(item, index) => index}
        renderItem={({item}) => (
          <PostGoalCard key={item.username} item={item} navigation={navigation} />
        )}
      />
    </SafeAreaView>
  );
};

export default PostsScreen;

Ответ №1:

Вы можете попробовать это

 import React, {useState, useEffect} from 'react';
import {FlatList, StyleSheet, SafeAreaView} from 'react-native';
import PostGoalCard from '../components/PostGoalCard';
import Loader from '../components/Loader';
import axios from 'axios';

const PostsScreen = ({navigation}) => {
  const [loading, setLoading] = useState(false);
  const [data, setData] = React.useState([])
  const url = 'http://10.0.2.2:8000';

  useEffect(() => {
        getPosts();
    }, []);


  const getPosts = () => {
    axios
      .get(`${url}/posts`)
      .then(response => {
        console.log(response)
        setData(response.data);
      })
      .catch(error => {
        console.log(JSON.stringify(error));
      });
  } 

  return (
    <SafeAreaView style={styles.container}>
      <Loader loading={loading} />
      <FlatList
        style={styles.flatlist}
        data={data}
        keyExtractor={(item, index) => index}
        renderItem={({item}) => (
          <PostGoalCard key={item.username} item={item} navigation={navigation} />
        )}
      />
    </SafeAreaView>
  );
};

export default PostsScreen;

useEffect будет отображаться getPosts перед отображением экрана.

Метки: