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

Posted 2023-02-22

【中文标题】重新加载页面后立即填写该字段

【英文标题】：Fill the field immediately after reloading the page

【发布时间】：2020-02-03 18:01:32

【问题描述】：

我的 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)

上次更新：

我不知道为什么但它有效（我不记得我做了什么（͡°͜ʖ͡°）），好的，谢谢大家的帮助。

【问题讨论】：

在Formik 上使用enableReinitialize 属性。默认情况下，如果initialValues 发生变化，Formik 不会重新渲染。这有点小技巧，但它确实有效。

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

【参考方案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

我检查了它，它对我来说很好。

【讨论】：

可以快速堆叠闪电战吗？我们可以提供更好的帮助。

一秒钟，我有了新想法