ReactJS / Axios：未处理的拒绝错误：请求失败，状态码为500

如何解决ReactJS / Axios：未处理的拒绝错误：请求失败，状态码为500

我正在创建一个带有React前端和Flask后端的工作板。当我尝试致电Flask支持时，出现未处理的拒绝（错误）：请求失败，状态码为500。其他一些详细信息：

我收到TypeError：Flask后端的'nonetype'对象不是下标错误。我认为我没有发送请求参数，但我不知道为什么。
后端与Postman一起使用。
getJoblisting似乎从输入中清除了状态

这是我的React代码：

import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';

function cardlayout(props,i)
{
    return(
        <div key={i}>
            <p>{props.description}</p>
        </div>
    )

}//cardlayout

function Jobcard(props)
{
    let job_reports = props.reports;

    let reports_length = 0;
    let json_reports = [];

    if (typeof job_listings !== 'undefined')
    {
        json_reports=JSON.parse(job_reports);
        reports_length = json_reports.length;
    }//if not undefined

    var rows = [];
    for (var i = 0; i < reports_length; i++) {
        rows.push( cardlayout(json_reports[i],i));
    }

    return (
        <div>
            {rows}
        </div>
    );
}//function Jobrow

class JobSearch extends React.Component {

  constructor(props) {
    super(props);
        this.state =
            {
                q: null,l: null,ip: null,status: "Look for your dream job"
            };
        //bind to make `this` work in the callback
        this.handleChange = this.handleChange.bind(this);
        this.getJobListing = this.getJobListing.bind(this);
     }

  handleChange = event => {
      this.setState({ [event.target.name]: event.target.value });
  }

  getJobListing()
  {
      this.setState({
          status: "Searching...",});

      //send to server
      let json_req = {"q": this.state.q,"l": this.state.l,"ip": this.state.ip};

      axios.get(process.env.REACT_APP_JOB_BOARD_API,json_req)
          .then(res => {
              this.setState({
                  status: Jobcard(res.data)
              });
          }) //axios
  }//getJobListing

  render()
  {
    let job_report;
    job_report = this.state.status;

    return (
        <div>
            <div>
                <input
                    type="text"
                    name="q"
                    onChange={this.handleChange}
                />
            </div>
            <div>
                <input
                type="text"
                name="q"
                onChange={this.handleChange}
                />
            </div>
            <div>
                <input
                type="text"
                name="ip"
                onChange={this.handleChange}
                />
            </div>
            <div>
                <button
                    onClick={this.getJobListing}
                    >
                    SUBMIT
                </button>
            </div>
            <div>
                { job_report }
            </div>
      </div>
        )
  }

}

ReactDOM.render(
    <JobSearch />,document.getElementById('root')
  );

错误消息

Unhandled Rejection (Error): Request Failed with status code 500

getJobListing
src/index.js:69

  66 | //send to server
  67 | let json_req = {"q": this.state.q,"ip": this.state.ip};
  68 | 
> 69 | axios.get(process.env.REACT_APP_JOB_BOARD_API,json_req)
     | ^  70 |     .then(res => {
  71 |         this.setState({
  72 |             status: Jobcard(res.data)

解决方法

您正在向API发送null值，而它却期望字符串，字典或列表，因为您似乎试图访问它们的各个元素（这就是'NoneType' object is not subscriptable的意思）。

将一个或多个字段留空时，您可能会收到此错误。然后它们将成为null，因为这就是初始化它们的方式。

解决方案是在将q，l和ip非空值发送到API之前，或者忽略API中的null值，例如>


data = request.get_json()

if data['q']:
    # do something useful only if q is not None