Encontré un problema al implementar el formulario en el que los datos utilizados en la selección, recuperados de la base de datos a través de la consulta de reacción, solo deben recuperarse una vez al hacer clic en la entrada, y los clics posteriores no deberían causar una recuperación .
¿Cómo hacerlo de manera limpia?
Gancho:
export const useUnitOfMeasureSelectData = ({ queryPageIndex, queryPageSize, queryFilters, enabled, refetchOnWindowFocus, }) => { return useQuery( ["unitofmeasure-list", queryPageIndex, queryPageSize, queryFilters], () => fetchItemData(queryPageIndex, queryPageSize, queryFilters), { keepPreviousData: true, staleTime: 60000, enabled, refetchOnWindowFocus, select: (data) => { const categories = data.data.results.map((obj) => ({ value: obj.id, label: obj.name, })); return categories; }, } ); }; En el componente que llama a onClick={()=>refetch()} recupera datos en cada clic.
const { data: unitOfMeasureSelectData = [], refetch: refetchUnitOfMeasureSelectData, } = useUnitOfMeasureSelectData({ queryPageIndex: queryPageIndex, queryPageSize: queryPageSize, queryFilters: filterString, enabled: false, refetchOnWindowFocus: false, });parece que quieres una consulta perezosa con tiempo obsoleto infinito:
const [enabled, setEnabled] = useState(false) useQuery(key, fn, { enabled, staleTime: Infinity }) luego, cuando hace clic en la entrada, llama a setEnabled: true . El tiempo obsoleto infinito garantiza que la consulta siempre se considere nueva, por lo que no se realizan más recuperaciones en segundo plano.
El botón en react/native tiene una propiedad disabled que puede establecer en falso cuando haya terminado. Probablemente la manera de hacer esto es con state
<button disabled={this.state.btnDisable}/>Luego puede actualizar el estado cuando hace clic por primera vez en el botón
//class component this.setState({btnDisable: false}) //function component setbtnDisable(false)