#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
перед отображением экрана.