Блог

Я пытаюсь извлекать новые данные каждый раз, когда пользователь прокручивает страницу вниз, вот так :

 <FlatList
    onEndReachedThreshold={0}
    onEndReached={LoadMoreRandomData}
    data={data}
    keyExtractor={(item) => item.email.toString()}
    renderItem={({ item }) => <Text style={{ marginVertical: 100 }}>{item.email}</Text>}
/>
 

Функция, которая вызывается, когда пользователь добирается до нижней части FlatList:

 useEffect(
        () => {
            if (page !== 1) {
                setLoading(true);
                axios
                    .get(`https://randomuser.me/api/?results=10amp;page=${page}`)
                    .then((res) => {
                        setData((prev) => res.data.results.concat(prev));
                        setLoading(false);
                    })
                    .catch((e) => {
                        setLoading(false);
                    });
            }
        },
        [ page ]
    );

    const LoadMoreRandomData = () => {
        setPage((prev) => prev   1);
    };
 

Проблема в том, что при вызове useEffect весь экран исчезает на пару секунд.

Как я могу получить новые данные и установить состояние со старыми данными, а экран не мигает?

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

Попробуйте что-то вроде этого:

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

const fetchData = () => {
 if (page !== 1) {
    setLoading(true);
    axios
        .get(`https://randomuser.me/api/?results=10amp;page=${page}`)
        .then((res) => {
            setData((prev) => res.data.results.concat(prev));
            setLoading(false);
        })
        .catch((e) => {
            setLoading(false);
        });
    }   
}

const LoadMoreRandomData = () => {
    setPage((prev) => prev   1);
    fetchData();
};
 

возможно, вы захотите использовать useCallback там хук, чтобы предотвратить повторное создание функции.

 const fetchData = useCallback(() => {
....
}, []);
 

Это сделает его более производительным, а также будет иметь страницу в качестве аргумента

 const fetchData = useCallback((page) => {
...
}, []);