Пытаюсь вытащить из API сервиса данные и вставить их в компонент.
Вот код:
class App extends Component {
constructor() {
super();
this.state = {
dataObj : {}
}
}
componentDidMount() {
fetch("https://api.topvisor.ru/v2/json/get/positions_2/history", {
method: 'POST',
headers: {
'User-Id' : '11111',
'Authorization' : '5b10f6bf67f433e2fa0c',
'Content-type' : 'application/json'
},
body: JSON.stringify({
'group_folder_id_depth' : 1,
'project_id' : 561448,
'regions_indexes' : [76],
'fields' : ['name','id','tags','target','group_name'],
'type_range' : 2,
'date1' : '2018-06-25',
'date2' : '2018-07-04',
'count_dates' : 31,
'limit' : 100,
'offset' : 0,
'show_headers' : 1,
'show_exists_dates' : 1,
'show_visitors' : 1,
'show_top_by_depth' : 10,
})
})
.then(response => {
response.json();
})
.then(data => {
let objcts = data.results.map((obj) => {
return (
<li key={obj.results}>
{obj.results.keywords.name}
</li>
)
})
this.setState({dataObj: data});
console.log('state' + this.state.dataObj);
});
}
render() {
return (
<div className="App">
<ul>
</ul>
</div>
);
}
}
export default App;
Ошибки:
TypeError: Cannot read property 'results' of undefined
Для кода:
import React, { Component } from 'react';
import './App.css';
class App extends Component {
constructor() {
super();
this.state = {
dataObj : {}
}
}
componentDidMount() {
fetch("https://api.topvisor.ru/v2/json/get/positions_2/history", {
method: 'POST',
headers: {
'User-Id' : '44583',
'Authorization' : '5b80f6bf27f633e4fa0c',
'Content-type' : 'application/json'
},
body: JSON.stringify({
'group_folder_id_depth' : 1,
'project_id' : 561448,
'regions_indexes' : [76],
'fields' : ['name','id','tags','target','group_name'],
'type_range' : 2,
'date1' : '2018-06-25',
'date2' : '2018-07-04',
'count_dates' : 31,
'limit' : 100,
'offset' : 0,
'show_headers' : 1,
'show_exists_dates' : 1,
'show_visitors' : 1,
'show_top_by_depth' : 10,
})
})
.then(response => {
response.json();
})
.then(data => {
let objcts = data.results.map((obj) => {
return (
<li key={obj.results}>
</li>
)
})
this.setState({dataObj: data});
console.log('state' + this.state.dataObj);
});
}
render() {
return (
<div className="App">
<ul>
{this.state.dataObj}
</ul>
</div>
);
}
}
Ошибки:
Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.
in ul (at App.js:55)
in div (at App.js:54)
in App (at index.js:7)
Я мало чего соображаю в React, поэтому подскажите хотя бы ссылочки, где можно было бы подсмотреть. Готовое решение тоже хорошо)