重新加载页面后立即填写字段

Question

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

如果我们仔细观察，将会发现该字段没有完成：

我认为这是因为服务器端将简单的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)
最新更新

：

我不知道为什么，但是它有效（我不记得我做了什么（好吧，好吧，谢谢大家的帮助。）>

我在NextJS应用程序中有搜索页面。网址示例-/ search？q = Naaarutoo。例如，重新加载后，我只想将“ Naaarutoo”设置为输入值（我知道如何将查询参数设置为...

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