Flatlist createRef().current 在打开侧边菜单时为空

Question

我正在使用 React Native 并使用组件引用构建了一个自动滚动的 Flatlist 来访问 scrollToIndex 方法。

一切正常，直到我打开 SideMenu，它以某种方式导致 flatList.current 变为空，从而导致应用程序错误。

不知道有没有人知道为什么会这样？感谢帮助。谢谢

App.js

import React, {useState} from 'react';
import { StyleSheet, Text, Image, View, SafeAreaView, ScrollView } from 'react-native';
import Background from './components/Background'
import Header from './components/Header'
import SideMenu from './components/SideMenu';
import SearchBar from './components/SearchBar'
import Swiper from './components/Swiper'

export default function App() {

const [ sideMenuOpen, setSideMenuOpen ] = useState(false)

const hamburgerHandler = () => {

  sideMenuOpen ? setSideMenuOpen(false) : setSideMenuOpen(true)

}

return (
  <SafeAreaView style={styles.container}>
    <View style={styles.background}>
      <Background />
    </View>
    <Header sideMenuOpen={sideMenuOpen} setSideMenu={hamburgerHandler} />
    <SideMenu sideMenuOpen={sideMenuOpen} />
    <SearchBar />
    <View style={sideMenuOpen ? styles.contentContainer : {height: '100%'}} >
      <ScrollView>          
        <Swiper header={'Movies & TV: Coming Soon'} interval={6000} />
      </ScrollView>      
    </View>
  </SafeAreaView>
  );
}

Swiper.js

import React, { useEffect, createRef } from "react";
import { View, Text, Image, FlatList, StyleSheet, Dimensions, } from 'react-native'

const Slider = props => {

  const flatList = createRef()
  const renderItem = ({ item }) => <Item content={item} />
  const header = props.header ? <Text style={styles.header}>{props.header}</Text> : <Text> 
  </Text>

  let currentSlide = 0
  let timer

  const _incrementSlider = (scale=0) => {
    currentSlide+=scale
    if (currentSlide > data.length-1) currentSlide = 0

    flatList.current.scrollToIndex({
      index: currentSlide,
      animated: true
    })
  }

  const _startAutoPlay = () => {
    if (!props.interval) return
    timer = setInterval(() => _incrementSlider(1), props.interval)
  }

  const _stopAutoPlay = () => {
    clearInterval(timer)
    timer = null
  }

  //ComponentDidMount
  useEffect(() => {
    console.log('mounted')
    _startAutoPlay()
  }, [])

  //ComponentWillUnmount
  useEffect(() => {
    return () => {
      console.log('unmounted')
      _stopAutoPlay()
    }
  }, [])

  return (
    <View style={styles.container}>
      {header}
      <FlatList
        data={data}
        pagingEnabled={true}
        horizontal={true}
        renderItem={renderItem}
        keyExtractor={item => item.id}
        ref={flatList}
      />
    </View>
  )

}

Answer 1

每次此组件渲染时，您都会再次调用 createRef，这会创建一个全新的引用。作为一个新的 ref，它的 .current 属性有 null。 createRef 并不是真正用于函数组件，而是应该使用 useRef。它只会创建一次 ref，然后 return 在每次渲染时将其提供给您。

import React, { useEffect, useRef } from "react";
// ...
const flatList = useRef();

Flatlist createRef().current 在打开侧边菜单时为空

Flatlist createRef().current is null when opening sidemenu

reactjs

react-native

react-native-flatlist