React hooks 重置状态和获取数据

Question

我正在使用 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 从未设置为 []。我可以在这里读到这是预期的行为：。

但是更好的方法是什么？因为我在使用的时候，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);
    });
}

Answer 1

如果你明白我在这里想做的事情，它可能最适合你

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

React hooks 重置状态和获取数据

React hooks reset state and fetch data

javascript

reactjs

react-native

react-hooks

use-effect