Question

我想从/ {url}获取数据（数组），我尝试了这段代码

// Fetch the list on first mount
componentDidMount() {
this.getList();
}

// Retrieves the list of items from the Express app
getList = () => {

fetch('/main')
.then(res => res.json())
.then(list => this.setState({ list }))
}

这工作正常，但随后我决定切换到axios并尝试了完全相同的代码

  // Fetch the list on first mount
componentDidMount() {
this.getList();
}

 // Retrieves the list of items from the Express app
 getList = () => {
 axios.get('/main')
.then(res=> res.json())
.then(list => this.setState({list}))

}

但是它没有用，并在此行给了我错误：.then（res => res.json（））所以我不知道如果有人知道这是什么问题，如果你告诉我我会很高兴

Answer 1

这是因为axios的响应不同，而不是res.json()返回已经像return res.data这样的数据，或者直接将其传递给状态，例如

getList = () => {
 axios.get('/main')
   .then(res=> this.setState({list: res.data}))

Answer 2

// Fetch the list on first mount
componentDidMount() {
  this.getList();
}

// Retrieves the list of items from the Express app
getList = () => {
 axios.get('/main')
 .then(res=> res.data)
 .then(list => this.setState({list}))
 .catch(error => this.setState({error: error.message}))
}

Answer 3

我会建议您对设计进行一些更改，因为在许多项目中都可以成功使用axios，虽然这不是必需的，但它可以帮助并且工作非常可靠：

创建api.js之类的服务

import axios from 'axios';

export default axios.create({
  baseURL: `http://my.api.url/`
});

然后您可以像这样使用它

import API from '../Services/api'; // this is your service you created before

LoadStats = async event => {
    try {
        var response = await API.get('api/targetroute');
        if (response.data != null) {
            this.setState({
                stats: {
                    mydata: response.data
                }
            });
            console.log('Receiving result: '+JSON.stringify(response.data));
        }
    } catch (error) {
        console.log('ERROR: '+error)
    }
}

axios无法使用，而fetch可以使用

3 个答案: