NodeJS React查询与形式初值异步问题

ig9co6j1 于 2022-12-22 发布在 Node.js

关注(0)|答案(2)|浏览(92)

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:()=>{}
    }
   )

在这段代码中，我有延迟的原因，formik每次发送给我null，所以你看到formik的初始值，它需要一个加载的数据来。
如果我可以使用查询。那么（formik）我的问题就解决了。但是你知道React规则，所以我怎么解决这个问题呢？

node.js

来源：https://stackoverflow.com/questions/73078146/react-reactquery-and-formik-initialvalues-async-problem

2条答案

按热度按时间

ilmyapht1#

我不认为useEffect在data更改时设置值在许多情况下是正确的，因为使用react-query时，后台更新可能会更改data，然后您的用户输入将被覆盖。
我在博客中详细介绍了几种方法：https://tkdodo.eu/blog/react-query-and-forms
最简单的办法就是把它分成两部分：

const { data } = useQuery(...)

if (!data) return 'loading...'

return <Form initialData={data} />

然后在Form中，您可以调用useFormik并设置初始值，因为只有在数据可用时才会挂载它。

赞(0）回复(0）举报 2022-12-22

b4lqfgs42#

感谢@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:()=>{}
    }
   )

赞(0）回复(0）举报 2022-12-22

我来回答

NodeJS React查询与形式初值异步问题

2条答案

相关问题

热门标签

最新问答