Я делаю вызов топора ios .get API, в React. Когда я запускаю его в первый раз, я получаю ожидаемые результаты. Когда я запускаю его в следующий раз и ищу то же самое, я получаю больше результатов, чем первоначально. Затем, если я снова буду искать то же самое, я получу еще больше результатов, чем у меня во второй раз. Он продолжает добавлять новые результаты к старым, не запуская новый поиск. Если я ищу другое ключевое слово, то получаю результаты как с новыми, так и со старыми результатами, которые я делал раньше.
Возможно, это легко исправить, но как мне его отбросить? старые результаты и создавать новые? Я пытался создать CancelTokens, но безуспешно. В настоящее время я помещаю результаты в новый массив, и я устанавливаю этот массив равным нулю при первом отображении компонента, поэтому я не понимаю, как эта проблема происходит в первую очередь.
Спасибо за любые помощь, которую вы можете предложить!
async componentDidMount() {
//searches the api for the hashtag that the user entered
newArray.length=0;
newArray=[];
await axios.get(`https://laffy.herokuapp.com/search/${this.props.toSearch}`).then(function(response) {
returnedKeywordSearch = response.data;
}) //if the api call returns an error, ignore it
.catch(function(err) {
return null;
});
//goes through the list of locations sent from the api above and finds the latitude/longitude for each
var count = 0;
while (count < returnedKeywordSearch.length) {
locationToSearch = returnedKeywordSearch[count].location;
if (locationToSearch !== undefined) {
var locationList = await axios.get(`https://api.mapbox.com/geocoding/v5/mapbox.places/${locationToSearch}.json?access_token=pk.eyJ1IjoibGF1bmRyeXNuYWlsIiwiYSI6ImNrODlhem95aDAzNGkzZmw5Z2lhcjIxY2UifQ.Aw4J8uxMSY2h4K9qVJp4lg`)
.catch(function(err) {
return null;
});
if (locationList !== null) {
if (Array.isArray(locationList.data.features) && locationList.data.features.length)
{
locationCoordinates.push(locationList.data.features[0].center);
if (returnedKeywordSearch[count].location!== null && returnedKeywordSearch[count].location!==""
&& locationList.data.features[0].center !== undefined)
{newArray.push({
id: returnedKeywordSearch[count].id,
createdAt: returnedKeywordSearch[count].createdAt,
text: returnedKeywordSearch[count].text,
name: returnedKeywordSearch[count].name,
location: returnedKeywordSearch[count].location,
coordinates: locationList.data.features[0].center
});
}
}
}
}
count++;
}
//tweetSpots is set to null in the initial component state set up
this.setState({tweetSpots: newArray});
this.setState({ done: true}); //sets done to true so that loading animation goes away and map displays
}