Используйте ref, когда реквизит готов - PullRequest
Новая
       40

Используйте ref, когда реквизит готов

0 голосов
/ 17 апреля 2020 
export default class Test extends Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    if (this.props.data.length) {
      this.myRef.current.scrollToIndex({
        index: this.props.index,
      });
    }
  }

  render() {
    return (
      <FlatList
        ref={this.myRef}
        data={this.props.data}
        renderItem={this.renderItem}
        getItemLayout={(data, index) => ({
          length: 50,
          offset: 100 * index,
          index,
        })}
      />
    );
  }
}

Цель: Как только компонент рендерит, FlatList должен автоматически прокрутить вниз до элемента с index === this.props.index (Представьте себе приложение для обмена мгновенными сообщениями, в котором вы хотите автоматически прокрутить вниз до сообщение)

Проблема: Либо this.myRef, либо this.props.data не определено.

Наблюдение:

  1. this.myRef готово к использованию только в componentDidMount в ближайшее время.
  2. this.props не определено в componentDidMount, поскольку требуется this.props для чтения (Под ready я имею в виду, имеет значения, определены)
  3. В getDerivedStateFromProps Я проверил, готов ли this.props однако this.myRef все еще не определено. (Может быть, это слишком рано для инициализации)

Как мне достичь своей цели? 

System:
    OS: macOS 10.15.3
    CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
    Memory: 122.77 MB / 8.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.13.1 - ~/.nvm/versions/node/v12.13.1/bin/node
    npm: 6.12.1 - ~/.nvm/versions/node/v12.13.1/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK:
      API Levels: 28, 29
      Build Tools: 28.0.3, 29.0.2
      System Images: android-28 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5977832
    Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0
    react-native: https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz => 0.61.4

1 Ответ

0 голосов
/ 17 апреля 2020

componentDidMount вызывается только один раз после первого рендеринга, но если ваши данные не готовы, у вас не будет второго шанса прокрутить вниз.

Вам следует удалить componentDidMount и заменить его с componentDidUpdate для обработки изменений в props.data:

componentDidUpdate(prevProps) {
    if (this.props.data !== prevProps.data) {
        if (this.props.data.length) {
            this.myRef.current.scrollToIndex({
                index: this.props.index,
            });
        }
    }
}
...