Заполните поле сразу после перезагрузки страницы

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)

Последнее обновление :

Я не знаю почему, но это работает (я не помню, что я сделал(͡ ° ͜ʖ ͡ °)) ок, спасибо всем за помощь.

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

Я проверил, и он отлично работает для меня.