Как бы я переписал эту форму, чтобы заставить Formik работать с хуками? - PullRequest
Новая
       8

Как бы я переписал эту форму, чтобы заставить Formik работать с хуками?

0 голосов
/ 19 апреля 2020

Ниже приведен пример с использованием Formik. Когда Field находится в форме, я получаю следующую ошибку при попытке экспорта из Next: 

import React from "react";
import { connect } from "react-redux";
import { Formik, Field } from "formik";
import TextInput from "../components/TextInput";
import updateNameForUser from "../utils/updateNameForUser";

const UserForm = (props) => (
  <Formik
    initialValues={{ name: props.name }}
    onSubmit={(values) => props.updateName(values)}
  >
    {({ handleSubmit }) => (
      <form onSubmit={handleSubmit}>
        <Field name="name" placeholder="name" component={TextInput} />

        <button onClick={handleSubmit} type="submit">
          submit
        </button>
      </form>
    )}
  </Formik>
);

const mapDispatchToProps = (dispatch) => ({
  updateName: (values) => dispatch(updateNameForUser(values)),
});
const mapStateToProps = (state) => ({ name: state.users.name });

export default connect(mapStateToProps, mapDispatchToProps)(UserForm);

Ошибка: 

Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component.

Как это будет переписано для использования хуки для устранения ошибки?

Вот ссылка на базовую кодовую базу . Git клонировать и запустить: 

npm install
build next && build export

Версии библиотеки:

  • Далее: v9.3.5
  • Formik: v2.1.2
  • Реакция: v16.8.6

1 Ответ

0 голосов
/ 21 апреля 2020

Я собирался удалить этот вопрос, но я отвечу на него всем, кто ищет ошибку. Проблема заключалась в том, что моя среда использовала глобально установленную версию next вместо версии package.json.

Это происходит, когда вы запускаете next build && next export напрямую, а не как команду, которую вы запускаете через npm скрипт.

...