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

我在react中执行文件上传的错误处理。但我很难处理不同类型的错误和错误信息

在应用程序中，上载文件时可能会出现错误和错误消息，其中一些由react捕获，另一些由django（后端）捕获：

文件上载字段不是由用户填写的：在这种情况下 react捕捉到错误，消息为：“提交的数据 不是文件。请检查表单上的编码类型”

文件上载不是音频文件：错误被 django后端中的验证程序，消息为：“不受支持 文件类型。支持的故事文件类型为.mp3、.wav和.mp4“

文件太大，无法上传：错误被 验证程序返回后端，消息是：“音频文件exeeds 200 MB”

特别是对于react中的第一个错误，即当文件上载字段未填充时，应显示一条错误消息，如“此字段不能为空，请提供音频文件”

• 具体问题：如何管理此错误的自定义 有什么反应？如果我只是提供一条硬编码消息，则不会显示关于文件类型和文件捕获的后端消息

• 一般问题：我使用django some管理后端中的一些错误 在前端使用react。是否有一种最佳实践，即 一切都应该在后端或前端进行管理

组件故事

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

动作故事

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

错误故事

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

componentDidUpdate（prevProps）{
const{error，alert，message}=this.props；
if（错误！==prevProps.error）{
if（error.msg.title）alert.error（`请为您的故事提供标题'）；//
if（error.msg.content）alert.error（`Please为您的故事提供一个简短的描述`）；
if（error.msg.audio）alert.error（`audio:${error.msg.audio.join（）}`）；
}
如果（消息！==prevProps.message）{
if（message.addStory）alert.success（message.addStory）；
}
}
render（）{
返回；
}
}

非常感谢