Как настроить сообщения об ошибках в React? - PullRequest
Новая
       2

Как настроить сообщения об ошибках в React?

2 голосов
/ 11 апреля 2020

Я выполняю обработку ошибок для загрузки файла в ответ. Но я борюсь с обработкой различных типов ошибок и сообщений об ошибках.

В приложении могут быть ошибки и сообщения об ошибках при загрузке файла, некоторые перехватываются по реакции, а некоторые перехватываются django ( бэкэнд):

  1. Поле загрузки файла не заполнено пользователем: в этом случае ошибка отлавливается реакцией и появляется сообщение: «Отправленные данные не были файлом. Проверьте тип кодировки в форме ".
  2. Загрузка файла не является аудиофайлом: Ошибка обнаруживается валидатором в django бэкенде и появляется сообщение:« Неподдерживаемый тип файла. Поддерживаемые типы файлов истории: .mp3 , .wav и .mp4 "
  3. Файл слишком велик для загрузки: Ошибка перехватывается бэкэндом валидатора и появляется сообщение:« Аудио файл превышает 200 МБ »

В частности, для первой ошибки в реакции, т. Е. Когда поле загрузки файла не заполнено, должно появиться сообщение об ошибке, напоминающее что-то вроде «это поле не может оставаться пустым, укажите аудиофайл ".

  • Конкретный вопрос: Как мне управлять настройкой этого сообщения об ошибке в реакции? Если я просто предоставляю жестко закодированное сообщение, внутренние сообщения, касающиеся типа файла и размера файла, не отображаются.

  • Общие вопросы: я исправляю некоторые ошибки в бэкэнде с django некоторые в интерфейс с реагировать. Рекомендуется, чтобы все управлялось в бэкэнде или во внешнем интерфейсе.

История компонентов 

  onSubmit = e => {
  e.preventDefault();
  let { title, content, audio} = this.state;
  let formDataStory = new FormData(); // create form formData
  formDataStory.append('audio', audio); // add audio to formData
  formDataStory.append('title', title); // add title to formData
  formDataStory.append('content', content); // add content to formData
  this.props.addStory(formDataStory) // call addStory function with formDataStory as Input to create new Story
      .then(() => {
        this.setState({
          title: "", // clear title field after submission
          content:"", // clear content field after submission
        });
        this.inputRef.current.value = ''; // clear file field after submission 
      }) 
};

История действий 

// ADD Story
 export const addStory = formDataStory => (dispatch, getState) =>
new Promise((resolve, reject) => {
  axios.post(apiBase +"/story/", formDataStory, tokenConfig(getState) )
    .then(res => {
      dispatch(createMessage({ addStory: "Story Added" }));
      dispatch({
        type: ADD_STORY,
        payload: res.data
      });
      resolve(res);
    })
    .catch(err => {
      reject(err);
      dispatch(returnErrors(err.response.data, err.response.status))
    }
  );
});

История ошибок 

componentDidUpdate(prevProps) {
    const { error, alert, message } = this.props;
    if (error !== prevProps.error) {
      if (error.msg.title) alert.error(`Please provide a title to your story`); // 
      if (error.msg.content) alert.error(`Please provide a short description to your story`);
      if (error.msg.audio) alert.error(`Audio: ${error.msg.audio.join()}`);
    }

    if (message !== prevProps.message) {
      if (message.addStory) alert.success(message.addStory);
    }
  }

  render() {
    return <Fragment />;
  }
}

Большое спасибо!

...