Реагировать на родной плоский список scrollToItem, не прокручивая в componentDidMount - PullRequest
Новая
       50

Реагировать на родной плоский список scrollToItem, не прокручивая в componentDidMount

1 голос
/ 10 января 2020

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

  findIndexBySlug = memoizeOne(
    (postsArray, selectedPostSlug) => postsArray.findIndex(
      post => post.slug === selectedPostSlug,
    ),
  );

  constructor(props) {
    super(props);
    this.shouldScrollToPost = this.shouldScrollToPost.bind(this);
    this.scrollToIndex = this.scrollToIndex.bind(this);
    this.flatListRef = React.createRef();
  }

  componentDidMount() {
    this.shouldScrollToPost();
  }

  componentDidUpdate() {
    this.shouldScrollToPost();
  }

  shouldScrollToPost() {
    const { navigation } = this.props;
    const selectedPostSlug = navigation.getParam('selectedPostSlug');
    console.log('shouldscrollto', selectedPostSlug);
    if (selectedPostSlug) {
      const { posts } = this.props;
      const { postsArray } = posts;
      const selectedPostIndex = this.findIndexBySlug(
        postsArray, selectedPostSlug,
      );
      this.scrollToIndex(selectedPostIndex);
    }
  }

  scrollToIndex(index) {
    if (this.flatListRef.current) {
      console.log('scrolling to ', index)
      this.flatListRef.current.scrollToIndex({ index, animated: false });
    }
  }

В обоих первых монтированиях (componentDidMount) и последующие вызовы (componentDidUpdate) запускают весь console.log (включая тот, который проверяет наличие flatListref), но при первом вызове в componentDidMount прокрутка не происходит, в componentDidUpdate фактически происходит прокрутка!

Почему?

Это сводит меня с ума, даже читайте пост Дана Абрамова о доступности ссылок ( componentDidMount называется BEFORE ref callback ), а flatList является единственным отображаемым компонентом (на самом деле ссылка всегда доступны).

Любая помощь с благодарностью.

Спасибо

...