Реагировать на собственный плоский список scrollToEnd после добавления нового элемента

Question

Мне нужно прокрутить до конца FlatList после добавления нового элемента списка (например, чата). Поэтому я изменяю состояние новым сообщением и затем использую:

this.setState({messages});
this.messagesList.scrollToEnd({animated: true});

Это работает, только если я добавлю «магический» setTimeout (200 мс). Есть ли способ обнаружить, что добавлено новое сообщение, и я могу вызвать scrollToEnd?

Answer 1

setState является асинхронным, поэтому выполнение чего-либо после этого не будет работать.

Чтобы сделать что-то после того, как состояние установлено - передайте обратный вызов setState в качестве второго аргумента.

this.setState(
    {messages}, 
    () => this.messagesList.scrollToEnd({animated: true})
);

Но по моему опыту вам все равно понадобится короткий setTimeout.Поскольку после установки состояния может возникнуть некоторая задержка при рендеринге, и прокрутка будет запущена слишком рано.