为什么我的 Web 应用程序会收到未处理的拒绝错误？

Question

我最近开始为想成为作家的人制作一个网络应用程序。在这里，可以注册和登录。并且可以创造流派并写入其中。我正在使用 ReactJS 构建此应用程序。

现在，每当我尝试创建新类型时都会遇到错误。

错误如下所示： https://i.stack.imgur.com/3l69H.jpg

AddGenre.js 文件

import React, { Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import Paper from 'material-ui/Paper';
import { notify } from 'react-notify-toast';
import TextField from 'material-ui/TextField';
import { Link } from 'react-router-dom';
import '../styles.css';
import axiosInstance from '../Constants/AxiosCall';


class AddGenre extends Component {
  // initialize state
  state = {
    name: '',
    desc: '',
  }

  // handle user input
  handleInputChange = (event) => {
    const target = event.target;
    const value = target.value;
    const name = target.name;
    this.setState({ [name]: value });
  }

  // handle add category request
  handleAddGenre = () => {
    const payload = new FormData();
    payload.set('name', this.state.name);
    payload.set('desc', this.state.desc);

    // send POST request to API
    axiosInstance.post('genre', payload)
      .then((response) => {
        notify.show(response.data.message, 'success', 4000);
        this.props
          .history
          .push('/genres');
      })
      .catch((error) => {
        notify.show(error.response.data.message, 'error', 4000);
      });
  }

  // render add category form
  render() {
    const style = {
      marginLeft: 20,
      width: 340,
    };
    const divstyle = {
      width: 430,
      margin: 'auto',
      textAlign: 'left',
      paddingLeft: 20,
    };
    return (
      <MuiThemeProvider>
        <div className="main">
          <div className="inputs" style={{ paddingTop: '150px' }}>
            <Paper zDepth={2} style={divstyle}>
              <p className="heading"><b>ADD GENRE</b></p>

              <TextField
                floatingLabelText="Name"
                name="name"
                value={this.state.name}
                style={style}
                onChange={this.handleInputChange}
              /><br /><br />

              <TextField
                floatingLabelText="Description"
                name="desc"
                value={this.state.desc}
                style={style}
                onChange={this.handleInputChange}
              /><br /><br /><br />

              <div className="buttons">
                <button className="network" id="one" onClick={(event => this.handleAddGenre(event))}>ADD</button>
                <Link to="/genres"><button className="network" id="two">CANCEL</button></Link><br /><br /><br />

              </div>

            </Paper><br />

          </div>
        </div>
      </MuiThemeProvider>
    );
  }
}

export default AddGenre;

项目的层次结构如下所示 https://i.stack.imgur.com/dlbXe.jpg

请告诉我解决错误。

Answer 1

您的 .catch() 错误似乎没有 response 对象。

将您的 .catch 更改为

.catch((error) => {
     console.log("error is", error);
     //notify.show(error, 'error', 4000);
 })

这至少应该可以解决您当前的错误。

为什么我的 Web 应用程序会收到未处理的拒绝错误？

Why am I getting the unhandled rejection error for my web application?

reactjs

web-development-server