const {productid} = useParams() const {isLoading,isErr,data,err} =useQuery([`Admin`,productid],() => fetchProduct(productid)) const formik = useFormik({ initialValues: {title:data?.title, description:`${data?.description}`, price:`${data?.price}`, photos:data?.photos}, onSubmit:()=>{} } )en este código, tengo un retraso por este motivo, formik cada vez que me envía un valor nulo para que vea los valores iniciales de formik, es necesario que vengan datos cargados.
si puedo usarQuerry.then(formik) mi problema está resuelto. pero conoces las reglas de reacción, entonces, ¿cómo puedo resolver este problema?
No creo que un useEffect que establezca valores cada vez que cambien los data sea lo correcto en muchos casos, porque con react-query, pueden ocurrir actualizaciones en segundo plano que podrían cambiar los data y luego se sobrescribirá la entrada del usuario.
He entrado en detalles sobre un par de enfoques en mi blog: https://tkdodo.eu/blog/react-query-and-forms
Lo más simple es realmente dividirlo en dos componentes:
const { data } = useQuery(...) if (!data) return 'loading...' return <Form initialData={data} /> luego, dentro de Form , puede llamar a useFormik y establecer los valores iniciales, ya que solo se montará tan pronto como los datos estén disponibles.
encontré la solución gracias a @Sergey-Sosunov
const {isLoading,isErr,data,err} =useQuery([`Admin`,productid],() => fetchProduct(productid)) const initialData ={title:data?.title, description:data?.description, price:data?.price, photos:data?.photos} useEffect(()=>{ formik.setValues({...initialData}) },[data]) const formik = useFormik({ enableReinitialize: true, initialValues: initialData, onSubmit:()=>{} } )