Мне нужно отслеживать некоторые данные об обновлении данных на экране каждые одну или две секунды. Как я понял, это использовало эту реализацию:
componentDidMount() {
this.timer = setInterval(()=> this.getItems(), 1000);
}
componentWillUnmount() {
this.timer = null;
}
getItems() {
fetch(this.getEndpoint('api url endpoint"))
.then(result => result.json())
.then(result => this.setState({ items: result }));
}
Это правильный подход?
Ну, поскольку у вас есть только API и вы не можете контролировать его, чтобы изменить его на использование сокетов, единственный способ сделать это - опросить.
Что касается вашего опроса, вы делаете приличный подход. Но в вашем коде есть одна загвоздка.
componentDidMount() {
this.timer = setInterval(()=> this.getItems(), 1000);
}
componentWillUnmount() {
this.timer = null; // here...
}
getItems() {
fetch(this.getEndpoint('api url endpoint"))
.then(result => result.json())
.then(result => this.setState({ items: result }));
}
Проблема здесь в том, что после размонтирования компонента, хотя ссылка на интервал, который вы сохранили в this.timer, установлена на null, он еще не останавливается. Интервал будет продолжать вызывать обработчик даже после того, как ваш компонент был размонтирован, и попытается setState в компоненте, который больше не существует.
Для правильной обработки сначала используйте clearInterval(this.timer), а затем установите this.timer = null.
Кроме того, вызов fetch является асинхронным, что может вызвать ту же проблему. Сделайте отменяемым и отмените, если какой-либо fetch будет неполным.
Надеюсь, это поможет.