Проверка Joi проверка react .custom() в react

#javascript #reactjs #validation #joi

#javascript #reactjs #проверка #joi

Вопрос:

Здравствуйте, я пытаюсь добавить пользовательскую проверку в свою форму, используя библиотеку Joi. В основном я хочу получить доступ к api и либо вернуть сообщение об ошибке, либо нет на основе данных. вот моя схема Joi

   const schema = Joi.object({
    email: Joi.string()
      .email({ tlds: { allow: false } })
      .required(),
    firstName: Joi.string().required(),
    lastName: Joi.string().required(),
    description: Joi.string().min(10).max(250).required().custom(isSad).message({'description.invalid':`the value provided in the description field is sad, please redact it`}),
  });
 

функция isSad, переданная в аргументе custom()

   const isSad =  (value,helpers) => {
    fetch('api url',{
      method: "POST",
      headers: {
        "apikey": "key"
      },
      body:value 
    }).then(data => {
      return data.json()
    }).then(data => {
      
      if(data.Sad > 0.49) {
        return helpers.error('description.invalid');
      }
    }).catch(error => {
      console.log('logging the error in catch', error)
    })
  }
 

Насколько я понимаю, я отправляю ‘description.invalid’ функции .message() в схеме, где я должен использовать его в переданном объекте для отображения пользовательского сообщения, но по какой-то причине я не получаю отображаемое сообщение об ошибке. Поле, похоже, проверено как действительное, чего не должно быть в моем случае, если полученное значение равно> 0,49

РЕДАКТИРОВАТЬ: пробовал использовать schema.validateAsync с помощью .external() вот так

   const isSad =  (value,helpers) => {
    console.log('logging value',value)
    console.log('logging helpers',helpers)

    fetch('api',{
      method: "POST",
      headers: {
        "apikey": "apikey"
      },
      body:value 
    }).then(data => {
      return data.json()
    }).then(data => {
      if(data.Sad > 0.49) { 
        throw new Error('Ur description is sad please edit it')
      }
    }).catch(error => {
      console.log('logging the error in catch', error)
    })
  }
 

и к схеме я просто прикрепляю .external(isSad) вот так

   const schema = Joi.object({
    email: Joi.string()
      .email({ tlds: { allow: false } })
      .required(),
    firstName: Joi.string().required(),
    lastName: Joi.string().required(),
    description: Joi.string().min(10).max(250).required().external(isSad)
});
 

Мне также пришлось преобразовать код, в котором я использую schema.validateAsync, поскольку теперь он возвращает данные в виде HTTP-ответа.НО это все равно не работает, я не получаю никакого ответа от .external(), и поле описания проверяется (это похоже на то, что .external() там вообще нет).

Ответ №1:

Обнаружена проблема, в ней говорится, что custom это только для синхронных функций, для асинхронных вам нужно использовать external .


ПРАВКА1

Если я правильно понимаю, и, пожалуйста, поправьте меня, если нет, проблема в том, что ошибка не выдается, когда она должна.
В этом случае я сделал следующее. Изменен запрос и данные.
Консоль сообщает: logging the error in catch Error: Ur description is sad please edit it . Что выглядит для меня как ожидаемое поведение.

 const isSad = (value) => {
  console.log("value: ", value);

  fetch("https://api.coindesk.com/v1/bpi/currentprice.json", {
    method: "GET"
  })
    .then((data) => data.json())
    .then((data) => {
      console.log("request data: ", data);
      if (value.startsWith(data.chartName)) {
        throw new Error("Ur description is sad please edit it");
      }
    })
    .catch((error) => {
      console.log("logging the error in catch", error);
    });
};

const schema = Joi.object({
  email: Joi.string()
    .email({ tlds: { allow: false } })
    .required(),
  firstName: Joi.string().required(),
  lastName: Joi.string().required(),
  description: Joi.string().min(10).max(250).required().external(isSad)
});

schema.validateAsync({
  email: "asf@adf.asdf",
  firstName: "adfsdafsdf",
  lastName: "asdfasdf",
  description: "Bitcoin111"
});
 

Комментарии:

1. Я тоже пробовал этот способ, преобразовал schema.validate в schema.validateAsync, а в самой схеме для описания я просто передаю external с помощью функции isSad. Похоже, я не получаю никакого ответа таким образом

2. @Frozendawn Я обновил ответ, пожалуйста, взгляните

Ответ №2:

В итоге я использовал .validate(), а не .validateAsync(), и выполнил собственную проверку пользовательских функций после того, как Joi уже проверил форму.