javascript - 如何在 React 中自定义错误消息？

Question

我正在为反应中的文件上传实现错误处理。但是我很难处理不同类型的错误和错误消息。

在应用程序中，上传文件时可能会出现错误和错误消息，有些被 react 捕获，有些被 django（后端）捕获：

1. 用户未填写文件上传字段：在这种情况下，react 捕获了错误，消息为：“提交的数据不是文件。检查表单上的编码类型”。
2. 文件上传不是音频文件：错误被 django 后端的验证器捕获，消息是：“不支持的文件类型。支持的故事文件类型是 .mp3、.wav 和 .mp4”
3. 文件太大，无法上传：错误被后端的验证器捕获，消息是：“音频文件 exeeds 200 MB”

特别是对于 react 中的第一个错误，即，当文件上传字段未填写时，应该会出现一条错误消息，例如“此字段不能留空，请提供音频文件”。

• 具体问题：如何在反应中管理此错误消息的自定义？如果我只提供硬编码消息，则不会显示有关文件类型和文件占用的后端消息。

• 一般问题：我在后端使用 django 管理一些错误，在前端使用 react.js 处理一些错误。是否有最佳实践，要么一切都应该在后端或前端进行管理。

组件故事

  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 />;
  }
}

非常感谢！

标签： javascriptreactjserror-handling