axios does not work with while fetch does - node.js

Question

i want to get data (array) from /{url} and i tried this code
// 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 }))
}
this is working fine but then i decided to switch to axios and tried literally same code
// 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}))
}
but it did not worked and gave me error in this line: .then(res=> res.json())
so i do not know what is problem if anyone knows the clue i will be glad if you tell me

Answer 1

// 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 2

It is because axios has different response, instead of res.json() return data already like : return res.data or pass it to state directly something like
getList = () => {
axios.get('/main')
.then(res=> this.setState({list: res.data}))

Answer 3

i would recommend some changes in your design, as im using axios successfully in many projects, its not a requirement but it helps and is working very reliable:
Create a service like api.js
import axios from 'axios';
export default axios.create({
baseURL: `http://my.api.url/`
});
Then you can use it like this
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)
}
}