重载页面后立即填写字段

Question

在我的NextJS应用程序中，我有一个搜索页面。URL示例-/search?q=Naaarutoo。例如，在重新加载后，我只想立即将“Naaarutoo”设置为输入值（我知道如何将查询参数设置为输入值）IMMEDIATELY。

如果我们仔细看，我们会发现该字段没有被填充： 我认为这是因为服务器端返回简单的HTML到客户端，然后才开始客户端执行。如果我错了，请纠正我。

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)

最近更新：

我不知道为什么，但它可以运行（我不记得我做了什么 ( ͡° ͜ʖ ͡°) ），好的，谢谢大家的帮助。

- Arthur

---

在 Formik 上使用 enableReinitialize 属性。默认情况下，如果 initialValues 改变，Formik 不会重新渲染。这是一种有点 hack 的方法，但它有效。 - Dan

@DanPantry，我在我的代码中有enableReinitialize。忘记在这里添加了，哎呀 - Arthur

Answer 1

你需要使用getInitialProps来使用查询。

import React from 'react'
import { Formik, Form, Field } from 'formik'

const Search = ({ query }) => (
    <Formik onSubmit={() => { }} initialValues={{ q: query.q || '' }} render={() => (
        <Form>
            <Field name='q' type="search" placeholder="Find something" />
        </Form>
    )} />
)

Search.getInitialProps = ({ query }) => {
    return { query }
}

export default Search

我已经检查过了，对我来说它可以正常工作。

- Rohith Balaji

---

可以快速创建一个 StackBlitz 吗？这样我们可以更好地帮助您。 - Rohith Balaji

一秒钟，我有新想法。 - Arthur