简体   繁体   English

Axios在react js中获取请求时出错

[英]Axios giving error on get request in react js

I have been trying to get data from the api using axios get request but it keeps on giving me error.我一直在尝试使用 axios get 请求从 api 获取数据,但它一直给我错误。 The error is TypeError: this.setstate is not a function i have seen multiple queries about it and almost all of them had done it this way but i cant figure out what iam doing wrong.错误是 TypeError: this.setstate is not a function 我见过很多关于它的查询,几乎所有的人都是这样做的,但我不知道我做错了什么。

My code for axios get我的 axios 代码得到

import React, { Component, Fragment } from 'react';
import axios from 'axios'

class Questionare extends Component {
    constructor(props) {
        super(props);
        this.state = {  
          items: [],

    }
} 

componentDidMount() {
  axios.get('http://leaty-dev.azurewebsites.net/api/services/app/PersonalityQuestionerCategory/GetAllPersonalityQuestionerCategory')
  .then(response => {
      console.log(response);
      this.setstate({items: response.data})
  })
  .catch(error => {
    console.log(error);
  });
}

    render() { 

       return (
          <ul>
            {this.state.items.map(item=>(
             <li>{item.pqcDetail}</li>
            ))}
          </ul>
       )
    }

}

export default Questionare;

It's camel case setState() not setstate()这是骆驼案例setState()不是setstate()

corrected更正

this.setState({items: response.data})

Improved complete code ---Live https://74u3w.csb.app/改进的完整代码---Live https://74u3w.csb.app/

import React, { Component } from "react";
import ReactDOM from "react-dom";
import axios from "axios";

class Questionare extends Component {
  state = {
      items: []
    };
  componentDidMount() {
    axios
      .get(
        "https://cors-anywhere.herokuapp.com/http://leaty-dev.azurewebsites.net/api/services/app/PersonalityQuestionerCategory/GetAllPersonalityQuestionerCategory"
      )
      .then(response => {
        this.setState({ items: response.data.result.items });
      })
      .catch(error => {
        console.log(error);
      });
  }

  render() {
    const { items } = this.state;
    return (
      <ul>
        {items.map(item => (
          <li>{item.pqcDetail}</li>
        ))}
      </ul>
    );
  }
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM