Бесконечная проблема FlatList - React Native, Expo - PullRequest
Новая
       31

Бесконечная проблема FlatList - React Native, Expo

0 голосов
/ 16 января 2020

Я использую Expo для разработки реактивных приложений. Я хочу создать бесконечный список, но каждый раз, когда запускается событие onEndReached, FlatList обновляется обновляется автоматически прокручивается к началу страницы! 

import React, { useState, useEffect } from "react";
import { SafeAreaView, Text, FlatList } from "react-native";

export default function App() {
  const [config, setConfig] = useState({
    result: [],
    page: 0
  });

  async function fetchData() {
    const response = await fetch("http://192.168.2.49:3500/q", {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
      },
      body: JSON.stringify({ page: config.page })
    });

    const data = await response.json();

    setConfig({
      result: [...config.result, ...data],
      page: config.page++
    });
  }

  const onEndReached = async () => {
    await setConfig({
      page: config.page++
    });
    fetchData();
  };

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

  return (
    <SafeAreaView>
      <Text>Current Page : {config.page}</Text>
      <FlatList
        data={config.result}
        renderItem={o => <Text>X :{o.item.t.c}</Text>}
        keyExtractor={item => item._id}
        onEndReached={() => onEndReached()}
        onEndReachedThreshold={0}
      ></FlatList>
    </SafeAreaView>
  );
}

1 Ответ

0 голосов
/ 16 января 2020

Вы звоните setConfig дважды, до вызова fetchData и после успешного запроса API. Что вызывает повторное рендеринг.

Я реорганизовал ваш код, попробуйте это. 

import React, { useState, useEffect, useCallback } from 'react';
import {
  SafeAreaView,
  Text,
  FlatList,
  NativeSyntheticEvent,
  NativeScrollEvent,
} from 'react-native';

export default function App() {
  const [config, setConfig] = useState({
    result: [],
    page: 0,
  });

  const [isScrolled, setIsScrolled] = useState(false);

  const fetchData = useCallback(() => {
    async function runFetch() {
      const response = await fetch('http://192.168.2.49:3500/q', {
        method: 'POST',
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ page: config.page }),
      });

      const data = await response.json();

      setConfig({
        result: [...config.result, ...data],
        page: config.page++,
      });
    }

    runFetch();
  }, [config.page, config.result]);

  const onEndReached = useCallback(() => fetchData(), [fetchData]);

  const onScroll = useCallback(
    e => setIsScrolled(e.nativeEvent.contentOffset.y > 0),
    [],
  );

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

  return (
    <SafeAreaView>
      <Text>Current Page : {config.page}</Text>
      <FlatList
        data={config.result}
        keyExtractor={item => item._id}
        onEndReached={onEndReached}
        onEndReachedThreshold={0.1}
        onScroll={onScroll}
        renderItem={o => <Text>X :{o.item.t.c}</Text>}
      />
    </SafeAreaView>
  );
}
...