[Реагировать]: Использовать Ref для scrollIntoView последнего сообщения различных потоков, если это необходимо

Question

У меня проблема с тем, что в моем приложении пользователь может загружать разные потоки сообщений, и если этот поток увеличился по сравнению с областью просмотра (ie, для просмотра нижних сообщений требуется полоса прокрутки), тогда я хочу для автоматической прокрутки к последнему сообщению.

Используя useRef, я отмечаю место сразу после своей карты следующим образом:

currentList.map(elem => ( <div>{elem}</div>) )
<div ref={messagesRef} /> // <------Here

Моя проблема заключается в том, что с помощью поля useRef.current Мой выбор веток сообщений всегда на один шаг позади, потому что ссылка обновляется с null после mount и, следовательно, отстает от того, на чем я активно выбираюсь. Кроме того, из-за этого мне пришлось принудительно выполнить проверку, чтобы убедиться, что я не пытался что-либо сделать с этим нулевым ссылочным номером, например:

useEffect(() => {
  if (messagesRef.current) { // < -- make sure we're not null
    scrollToBottom();
  }
}, [messagesRef]);

Метод scrollToBottom таков:

const scrollToBottom = () => {
  messagesRef.current.scrollIntoView({
    behavior: "smooth",
    block: "nearest" // <-- only scroll this div, not the parent as well
  });
};

Как я уже говорил ранее, моя цель - позволить пользователю выбирать разные потоки, и для любого потока, который нужно прокрутить вниз, я сделаю это для них. Однако, поскольку они выбирают поток, при выходе из статуса ref messagesRef.current он рендерит 1 поток позади того, что выбрано. Я проверил это, выдав результат messagesRef.current.parentNode.offsetHeight.

Каждый поток, который не нужно было прокручивать, имел offsetHeight меньше высоты окна моего сообщения (500 в моем случае). Хотя тот, который нужно прокручивать, был больше, чем высота моего окна.

Очень расстраивает попытка использовать этот useRef, когда текущее значение не обновляется с моими выборками.

Answer 1

Хотя я не смог решить проблему с использованием useRef, который был на один шаг позади моих выборов, я смог решить свою конечную проблему и получить результат, который искал; автопрокрутка до последнего сообщения, ЕСЛИ нам нужно.

Пока использовался useRef.current, не было и состояния моих сообщений. Таким образом, с помощью этого, чтобы проверить, когда мне нужно прокрутить, проблема была решена.

useEffect(() => {
  // be sure we need to scroll, length of 2 equates to the visual size of the message box
  if (currentList.length > 2) { // <-- more than 2, we've grown outside the window 
    scrollToBottom();
  }
  }, [currentList]); // <- update dependency array to state, not the Ref

Вот моя последняя рабочая версия. Вы можете видеть, что нить начинается с нуля, а затем, когда вы выбираете на кнопках, нить при необходимости прокручивается вниз.

https://codesandbox.io/s/userefissue-v86kq

Надежда это поможет кому-то в будущем, и если есть какие-либо советы о том, как обновлять мой реф с моим текущим выбором, я бы хотел услышать решение!