如何修复有时工作正常有时不能的响应代码

Question

我不会制作一个应用程序来获取当天NASA图像的一些照片。我展示了今天的图片和一些(例如 4 张(之前的图片。我使用日期选择器根据我的选择选择日期的图像。问题是有时它工作正常，有时只显示今天的照片，有时加上一两个以前的照片。有人可以解释一下发生了什么吗？

我已经重置了cookie，尝试使用Firefox和Chromium。我上传了带有DEMO_KEY的代码，但在我的应用程序中使用注册后收到的密钥。

应用.js：

import React, { Component } from "react";
import DateInput from "./components/DateInput.js";
import Photo from "./components/Photo.js";
import Axios from "axios";
class App extends Component {
state = {
date: new Date(),
currentPhoto: "",
photos:[]
};
componentDidMount(){
Axios
.get(`https://api.nasa.gov/planetary/apod?&api_key=DEMO_KEY`)
.then(response => this.setState({currentPhoto: response.data}));
this.getImages(5);
}
getImages = n => {
const daysBuffer = [];
for(let i=1; i<n; i++){      
let today = new Date();
today.setDate(today.getDate()-i);
daysBuffer.push(today);
}
const picBuffer = [];
const datesBuffer = daysBuffer.map(day => this.getDate(day));
datesBuffer.map(date => {
Axios
.get(`https://api.nasa.gov/planetary/apod?date=${date}&api_key=DEMO_KEY`)
.then(response => picBuffer.push(response.data));
})
this.setState({photos: picBuffer});
}
getDate = time => {
let year = time.getFullYear();
let month = time.getMonth();
let day = time.getDate();
return (
`${year}-${month}-${day}`
)
};
getPhoto = a => {
let date = this.getDate(a);
Axios
.get(`https://api.nasa.gov/planetary/apod?date=${date}&api_key=DEMO_KEY`)
.then(response => this.setState({currentPhoto: response.data}))
}
changeDate = date => {
this.setState({
date
});
this.getPhoto(date);
}
render() {
const imageGrid = this.state.photos.map(pic => {
return (
<ul>
<Photo photo = {pic} key={pic.date} />
</ul>
)
})
return (
<div>
<h1>NASA's Astronomy Picture of the Day</h1>
<DateInput 
changeDate = {this.changeDate}
date = {this.state.date}
/>
<Photo photo = {this.state.currentPhoto} />
{imageGrid}
</div>
);
}
}
export default App;

日期输入.js：

import React from "react";
import DatePicker from 'react-datepicker';
import "react-datepicker/dist/react-datepicker.css";
const DateInput = props => (
<div>
Select a Date: 
<DatePicker
selected = {props.date}
onChange = {props.changeDate}
/>
</div>
);
export default DateInput;
Photo.js
import React from 'react';
const Photo = props => (
<div>
<h3>{props.photo.title}</h3>
<img src={props.photo.url} alt={props.photo.title} />
<p>{props.photo.explanation}</p>
</div>
)
export default Photo;

Answer 1

代码中最可能的问题是，在异步检索图像时执行同步操作。 主要问题在于您的getImages函数

getImages = n => {
const daysBuffer = [];
for(let i=1; i<n; i++){      
let today = new Date();
today.setDate(today.getDate()-i);
daysBuffer.push(today);
}
const picBuffer = [];
const datesBuffer = daysBuffer.map(day => this.getDate(day));
datesBuffer.map(date => {
Axios
.get(`https://api.nasa.gov/planetary/apod?date=${date}&api_key=DEMO_KEY`)
.then(response => picBuffer.push(response.data));
})
this.setState({photos: picBuffer}); //this line runs before Axios finishes
}

要解决此问题，无需移动到 async/await(这更好，但需要重组(，您必须将最后几行更改为：

datesBuffer.map(date => {
Axios
.get(`https://api.nasa.gov/planetary/apod?date=${date}&api_key=DEMO_KEY`)
.then(response => {
picBuffer.push(response.data);
this.setState({photos: picBuffer});
})
})

请注意，它现在正在多次设置状态，这并不理想，但是在不知道 Axios 关于 async/await 的能力的情况下，这将是最合乎逻辑的解决方案。