Реакция перехватывает состояние сброса и извлекает данные - PullRequest
Новая
       39

Реакция перехватывает состояние сброса и извлекает данные

0 голосов
/ 11 марта 2020

Я создаю приложение с React native. Я использую FlatList с обработчиком onRefresh: 

 <FlatList 
  data={data} 
  renderItem={renderPost}
  keyExtractor={(item, index) => index.toString()}
  onEndReached={handleLoadMore}
  onEndReachedThreshold={0.5}
  ListFooterComponent={renderFooter}
  refreshing={isRefreshing}
  onRefresh={handleRefresh}>
</FlatList>

В этом обработчике onRefresh я сбрасываю список данных и получаю новые данные: 

 const handleRefresh = () => {
    setData([]);
    setIsRefreshing(true);
    fetchData();
  }

проблема в том, что data никогда не устанавливается на []. Я могу прочитать здесь, что это ожидаемое поведение: метод setState, не отражающий изменения немедленно .

Но что может быть лучше? Потому что когда я использую, useEffect у меня та же проблема: 

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

const handleRefresh = () => {
    setIsRefreshing(true);
  }

isRefreshing никогда не устанавливается на true.

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

- РЕДАКТИРОВАТЬ

fethData метод: 

const fetchData = () => {
  const url = 'my-api-url.com?page=' + page;

  fetch(url, {
    method: 'GET',
  }).then((response) => response.json())
    .then((json) => {        
      setData(data.concat(json.data));
      setIsLoading(false);
      setIsRefreshing(false);
    });
}

1 Ответ

1 голос
/ 11 марта 2020

Если вы поймете, что я пытаюсь сделать здесь, это может работать лучше для вас 

// how about isolating all the data fetch related hooks
// fetch will be called anytime your request params updates
// qs is from query string library

const useDataFetch = (url, method, params) => {
  const [refreshing, setRefreshing] = useState(false)
  const [fetching, setFetching] = useState(false)
  const [data, setData] = useState([])

  useEffect(() => {
    async (() => {
      const url = `${url}?${qs.stringify(params)}`

      // we set fetching to true while data is still to be fetched
      await setFetching(true)
      const rawResponse = await fetch(url, {method})

      // and set it back to false when done
      const newData = rawResponse.json().data

      if (refreshing) {
        setData(newData)
        setRefreshing(false)
      } else {
        setData([...data, ...newData])
      }

      setFetching(false)
    })()
  }, [params])

  return {refreshing, setRefreshing, fetching, data}
}

// and use it like this
// only params is outside of useDataFetch because of the feature refreshing
export default myApp = () => {
  const [params, setParams] = useState({page: 1})
  const {refreshing, setRefreshing, fetching, data} = useDataFetch('my-api-url.com', 'GET', params)

  const handleRefresh = async () => {
    await setRefreshing(true)
    setParams({page: 1})
  }

  return (
    <FlatList 
      data={data} 
      renderItem={renderPost}
      keyExtractor={(item, index) => index.toString()}
      onEndReached={handleLoadMore}
      onEndReachedThreshold={0.5}
      ListFooterComponent={renderFooter}
      refreshing={refreshing}
      onRefresh={handleRefresh}>
    </FlatList>
  )
}

// now things are reuseable and less code from now on
...