Как заставить мою проверку Joi на стороне сервера работать должным образом с redux-формой? - PullRequest
Новая
       9

Как заставить мою проверку Joi на стороне сервера работать должным образом с redux-формой?

0 голосов
/ 24 марта 2019

У меня есть проверка Joi на моем внутреннем экспресс-сервере.Я могу получить сообщения о проверке от бэкэнда в объект состояния ошибок при редуксе, однако, как правильно установить это состояние объекта притока, чтобы правильно отображать сообщения на внешнем интерфейсе с избыточной формой.Особенно, когда ошибки переключаются с одного на другое, например: «имя требуется» на «имя должно содержать не менее 2 символов»

Я пытался делать то, что говорят документы в форме редукса, импортируя SubmissionError и выбрасываяновый объект SubmissionError при возникновении ошибки проверки.

Похоже, что это происходит в функции обратного вызова, которая передается редукс-формам, владеющим методом this.props.handleSubmit.

Однако в моем текущем коде я получаю "реагирующий домен".development.js: 57 Неопределенное нарушение инварианта: объекты недопустимы как дочерние элементы React (найдено: объект с ключами {}). Если вы намеревались визуализировать коллекцию дочерних элементов, используйте вместо этого массив. "Ошибка сейчас,

Компонент, в котором находится компонент Input. 

class WorkoutNew extends React.Component {
  onSubmit = formValues => {

    this.props.createWorkout(formValues, this.props.history);
  };

  render() {
    return (
      <div>
        <h1 className="title is-3">Create a workout</h1>
        <SingleForm onSubmit={this.onSubmit} form="newWorkout" />
      </div>
    );
  }
}

const mapStateToProps = ({ errors }) => {
  return { errors };
};

export default connect(
  mapStateToProps,
  { createWorkout }
)(withRouter(WorkoutNew));

Повторно использованный компонент формы с одним входом.Я передаю form = "value" как реквизиты для установки каждого использования этой формы, чтобы иметь уникальное значение формы. 

class SingleForm extends React.Component {
  onSubmit = formValues => {
    console.log("Form Values", formValues);
    console.log("PROPS", this.props);

    if (formValues) {
      throw new SubmissionError({
        name: this.props.errors
      });
    }

    this.props.onSubmit(formValues);
  };

  render() {
    return (
      <div>
        <form onSubmit={this.props.handleSubmit(this.onSubmit)}>
          <Field label="Name" name="name" type="text" component={InputField} />
          <button
            type="submit"
            className="button is-primary is-large"
            style={{ marginTop: "20px" }}
          >
            Submit
          </button>
        </form>
      </div>
    );
  }
}

const mapStateToProps = ({ errors }) => {
  return { errors };
};

export default reduxForm({})(connect(mapStateToProps)(SingleForm));

Здесь я передаю пустой объект, потому что я использую этот компонент несколько раз, я передаюФорма: «значение» в качестве реквизита.

Мой создатель действий. 

export const createWorkout = (formValues, history) => dispatch => {
  axios
    .post("/api/workouts", formValues)
    .then(res => {
      history.push("/workouts");
      // Push back to workouts page
    })
    .catch(err => dispatch({ type: GET_ERRORS, payload: err.response.data }));
};

Я хотел бы, чтобы, когда я отправляю свои входные данные, они отображали ошибку проверки на стороне сервера под входными данными.Эти ошибки также корректно загружаются в мой объект ошибок приставки.

1 Ответ

1 голос
/ 24 марта 2019

Хранение эфемерного состояния в редуксе считается плохой практикой, я бы предложил использовать Formik , чтобы сохранить всю логику форм внутри вашего компонента, вы также обнаружите, что способ, которым Formik обрабатывает представления, позволяет устанавливать ошибки для каждого поля, используясумка Formik.В качестве альтернативы, я бы предложил вам использовать Yup для синхронизации проверки на стороне клиента, API почти точно такой же, как Joi .Как указано в репозитории Joi, вы не должны использовать Joi для проверки на стороне клиента, так как эта библиотека была разработана с учетом nodeJS.

...