Tengo un gancho, si me desplazo hacia abajo, solicitará nuevos datos como un desplazamiento infinito, pero cuando me desplazo hacia abajo, llama a la API para obtener nuevos datos, pero está eliminando los datos anteriores. Quiero concatenar con datos anteriores. Creo que es posible mediante el método de selección de consulta de reacción, pero ¿cómo puedo obtener los datos anteriores?
const useActivityFeedData = ( activityFeedPageIndex: number, pageSize = Config.defaultPageSize, ) => useQuery( [ACTIVITY_FEED, activityFeedPageIndex], () => Api.user.getActivityFeedData(activityFeedPageIndex, pageSize), { initialData: { activityList: [], }, keepPreviousData: true, select: (res: any) => ({ activityList: res.activityList, }), }, );Simplemente cree una matriz en el montaje de un componente como este,
let [data, setData] = useState([]) useEffect(()=>{ },[])Ahora obtenga axios en el mismo efecto de uso
useEffect(()=>{ let data = [] axios.get(`....`).then(res=>{ setData(res.data) }) },[])Ahora, después de desplazarse cuando obtenga nuevos datos, simplemente conéctelos a la matriz anterior.
eg: axios.get(`...`).then(res=>{ let var = data.concat(res.data) setData(var) })Luego, cuando mapea Data, a medida que se actualiza, la página sigue desplazándose.
Espero que esto ayude : )
¿Por qué no algo como:
const useActivityFeedData = ( activityFeedPageIndex: number, pageSize = Config.defaultPageSize, ) => const prevData = queryClient.getQueryData([ACTIVITY_FEED,activityFeedPageIndex]). useQuery( [ACTIVITY_FEED, activityFeedPageIndex], () => Api.user.getActivityFeedData(activityFeedPageIndex, pageSize), { initialData: { activityList: [], }, keepPreviousData: true, select: (res: any) => ({ activityList: res.activityList, }), }, );y luego simplemente devuelva el prevData con su respuesta o asigne la respuesta a una variable de useQuery y devuélvala.
Realmente está buscando una consulta infinita : useInfiniteQuery está hecho para este caso de uso exacto.