Невозможно отобразить данные из API
У меня есть несколько графиков (сделанных с помощью Graph js), и я хочу отобразить в них данные.
Кажется, я могу получить их, и данные отображаются в готовом виде, но я не могу отобразить их на фактическом графике. Я пробовал разные методы и даже отображал его прямо в поле возврата, но он все равно не работал и показал, что он не определен.
const API = 'http://127.0.0.1:5000/models/';
const DEFAULT_QUERY = 'Vno';
class App extends Component {
constructor(props) {
super(props);
this.state = {
chartData: {},
hits: [],
isLoading: false,
error: null
};
}
getChartData() {
const hits = this.state;
const nextMonths = ['February', 'March', 'April', 'June', 'July', 'August', 'September', 'October'];
this.setState({
chartData: {
labels: hits.pha,
datasets: [
{
label: 'Dataset',
fill: false,
lineTension: 0.1,
backgroundColor: ['rgba(243, 129, 129, 0.4)', 'rgba(75,192,192,0.4)',
'rgba(249, 237, 105, 0.4)',
'rgba(184, 59, 94, 0.4)',
'rgba(106, 44, 112, 0.4)',
'rgba(0, 184, 169, 0.4)',
'rgba(135, 133, 162, 0.4)'],
borderColor: '#fae3d9',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: '#212121)',
pointBackgroundColor: '#252a34',
pointBorderWidth: 3,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'rgba(75,192,192,1)',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 5,
pointHitRadius: 10,
data: [50, 30, 40, 60]
}
],
}
})
}
componentDidMount() {
this.setState({ isLoading: true });
fetch(API + DEFAULT_QUERY)
.then(response => {
if (response.ok) {
return response.json();
} else {
throw new Error('Something went wrong ...');
}
})
.then(data => this.setState({ hits: data.hits, isLoading: false }))
.catch(error => this.setState({ error, isLoading: false }));
}
componentWillMount() {
this.getChartData();
}
render() {
const { hits, isLoading, error } = this.state;
if (error) {
return <p>{error.message}</p>;
}
if (isLoading) {
return <div className = "react-spinner">
<MDSpinner size = {100} />
</div>
}
return (
<div className = "App">
<Navbar bg = "light" variant = "light">
<Navbar.Brand href = "#">Aeroconseil</Navbar.Brand>
<Nav className = "mr-auto">
</Nav>
</Navbar>
<hr className = "hr-line"></hr>
<div className = "container">
<Chart chartData = {this.state.chartData} />
<LineGraph chartData = {this.state.chartData} />
<ul>
{hits.map(hit =>
<li key = {hit.name}>
<a>{hit.pha}</a>
</li>
)}
</ul>
</div>
</div>
);
}
}
export default App;
Я ожидал, что данные из API будут отображаться, но он говорит, что не определено.
Кажется, это не из response.json(), и он возвращает обещание, поэтому я не думаю, что это проблема.
Попробуйте использовать const {hits} = this.state вместо const hits = this.state, поскольку вы пытаетесь получить доступ к свойству в объекте.
Хорошо, он по-прежнему говорит, что он пуст, но идея в render() после его регистрации показывает данные, но в компоненте getChartData() для того же объекта он показывает, что он пуст.
Я понимаю. Это потому, что вы вызываете метод в componentWillMount, который в основном является конструктором. Вы делаете вызов API в componentDidMount, который является следующим жизненным циклом. Поэтому вызовите свой метод в componentDidMount после получения ответа API и сообщите, если он все еще не показывает вам данные.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Несколько вещей, которые могут быть проблематичными:
- в первой строке определения
getCharDataвы должны использовать деструктурирование, поэтому это должно быть
getCharData() {
const { hits } = this.state;
// ...
}
метод жизненного цикла
componentWillMountбыл устарел в React 16.3 и был заменен наUNSAFE_componentWillMount, и, возможно, поэтому вы получаетеundefinedв React Обновления состояния могут быть асинхронными, поэтому вместо этого вы можете попробовать использовать метод жизненного цикла
componentDidUpdate
componentDidUpdate() {
this.getCharData();
}
Мне удалось это исправить. Я не думаю, что это хорошее решение, но если у кого-то есть какие-то идеи или проблема похожа на мою. (Мне не нужно было вызывать hits для getChartData() или вызывать его для render() const.)
let hit_labels = []
let hit_values = []
for(let item in this.state.hits){
hit_labels.push(this.state.hits[item].name);
let value = parseInt(this.state.hits[item].pha);
hit_values.push(isNaN(value) ? 0 : value);
}
this.state.chartData.labels = hit_labels;
this.state.chartData.datasets[0].data = hit_values;
console.info(this.state.chartData);
Я не уверен, что видел API, которые возвращают функции. Я имею в виду,
response.json()может быть виновником