React 钩子重置状态并获取数据

Question

I'm building an app with React native. I'm using a FlatList with an onRefresh handler:

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

Within that onRefresh handler I reset the data list and fetch new data:

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

The problem is that data is never set to [] . I can read here that it's expected behaviour: useState set method not reflecting change immediately .

But what would be a better way? Because when I use, useEffect I have the same problem:

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

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

isRefreshing is never set to true .

What is the best way of tackling this?

--EDIT

fethData method:

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);
    });
}

Answer 1

If you get what I'm trying to do here it might work best for you

// 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