在我的NextJS应用程序中,我有一个搜索页面。URL示例-
如果我们仔细看,我们会发现该字段没有被填充:
我认为这是因为服务器端返回简单的HTML到客户端,然后才开始客户端执行。如果我错了,请纠正我。
/search?q=Naaarutoo
。例如,在重新加载后,我只想立即将“Naaarutoo”设置为输入值(我知道如何将查询参数设置为输入值)IMMEDIATELY。如果我们仔细看,我们会发现该字段没有被填充:
![enter image description here](https://istack.dev59.com/qh2gr.webp)
import React from 'react'
import {Formik, Form, Field} from 'formik'
const Search = ({router: {query}}) => (
<Formik enableReinitialize onSubmit={() => {
}} initialValues={{q: query.q || ''}} render={() => (
<Form>
<Field name='q' type="search" placeholder="Find something"/>
</Form>
)}/>
)
export default withPageRouter(Search)
最近更新:
我不知道为什么,但它可以运行(我不记得我做了什么 ( ͡° ͜ʖ ͡°) ),好的,谢谢大家的帮助。
Formik
上使用enableReinitialize
属性。默认情况下,如果initialValues
改变,Formik
不会重新渲染。这是一种有点 hack 的方法,但它有效。 - DanenableReinitialize
。忘记在这里添加了,哎呀 - Arthur