Обнуление state при возвращении на главную страницу со второстепенной в react
При переходе на другую страничку а в последствии - обратно, проявляется баг с state, ниже приведу скриншот консоли

- Прогружаю страницу
- Прохожу по любой ссылке на странице
- Возвращаюсь назад и он пытается прогрузить объявления с 17 по 32, хотя с 1 по 16 еще не прогружены
При этом, теперь каждый раз на действие вызова функции он пытается вызвать объявления с 17 по 32 (ot - с какого объявления надо выгружать данные, do - сколько объявлений должно вернуться), пока полностью не перезагрузишь страницу приложения.
Сообщение ошибки:
index.js:1 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
Код:
constructor(props) {
super(props);
this.state = {
ot_ad: 0,
Ads: []
}
this.change_ot_ad = this.change_ot_ad.bind(this)
this.addAds = this.addAds.bind(this)
}
change_ot_ad() {
this.setState(prevState => {
return {
ot_ad: prevState.ot_ad + 16
}
})
}
addAds(allAds) {
this.setState({Ads: [...this.state.Ads, allAds]})
}
render() {
// This is add Ads is recomendation
// Loading ads when a class .bottom-main is visible
const os = new OnScreen();
os.on('enter', '.bottom-main',
() => {
if (this.state.Ads[this.state.Ads.length - 1] !== " ") {
this.addAds(reqwestAds(this.state.ot_ad));
this.change_ot_ad();
console.log('Ads: ', this.state.Ads)
}
}
)
// get Ads from the server
function reqwestAds(ot_ad) {
console.log('ot: ', ot_ad,', do: ', 16);
let dataString = '&ot=' + ot_ad + '&do=' + 16;
let reqwest = $.ajax({
type: "POST",
url: "ссылка",
async: false,
data: dataString,
cache: false,
success: function(data) { return data }
});
return allAdsFunc(reqwest.responseJSON)
}
function allAdsFunc(AdsData) {
console.log('Data: ', AdsData);
if (AdsData.length === 0) {
return " "
}
var allAds = AdsData.map(item => <AdsBlock key={item[0]}
item={item} />);
return allAds
}
Пытался обновить state добавлением компонента componentWillMount, однако это не помогло:
componentWillMount() {
this.setState({ot_ad: 0})
console.log('*-------------------------------------------*')
console.log('ot_ad:', this.state.ot_ad)
}
Како эту проблему можно решить?
Ответы (1 шт):
Проблема решена. Баг возникал из-за OnScreen. Заменил все теги Link на странице на a. Тем самым страница стала обновляться при переходах по внутренним ссылкам.