Реагировать на собственный плоский список 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, Поскольку после установки состояния может возникнуть некоторая задержка при рендеринге, и прокрутка будет запущена слишком рано.