在旋转木马视图中离开屏幕时，平面列表引用错误。

Question

我在React Native中有一个自动滚动的旋转木马，一切都很好，图像每X秒自动滚动一次，也可以手动滚动。

问题是当我离开那个屏幕时，我得到以下错误。

这是我的完整代码... ...

const { width, height } = Dimensions.get("window");
let flatList;

function infiniteScroll(dataList) {
  const numberOfData = dataList.length;
  let scrollValue = 0,
    scrolled = 0;
  setInterval(function () {
    scrolled++;
    if (scrolled < numberOfData) scrollValue = scrollValue + width;
    else {
      scrollValue = 0;
      scrolled = 0;
    }
    this.flatList.scrollToOffset({ animated: true, offset: scrollValue });
  }, 3000);
}

const Carousel = (props) => {
  const topTenVideos = useSelector(getTopTenVideos);
  const dispatch = useDispatch();

  const scrollX = new Animated.Value(0);
  let position = Animated.divide(scrollX, width);
  const [dataList, setDataList] = useState(topTenVideos);
  const isFocused = useIsFocused();

  useEffect(() => {
    if (isFocused) {
      setDataList(topTenVideos);
      infiniteScroll(dataList);
    }
  }, [isFocused]);

  const renderRow = (itemData) => {
    return (
      <CarouselItem
        id={itemData.item.id}
        img={itemData.item.poster}
        title={itemData.item.title}
      />
    );
  };

  return (
    <View style={styles.screen}>
      <FlatList
        ref={(flatList) => {
          this.flatList = flatList;
        }}
        horizontal
        data={dataList}
        pagingEnabled
        scrollEnabled
        snapToAlignment="center"
        scrollEventThrottle={16}
        decelerationRate={"fast"}
        showsHorizontalScrollIndicator={false}
        onScroll={Animated.event([
          { nativeEvent: { contentOffset: { x: scrollX } } },
        ])}
        keyExtractor={(item, index) => "key" + index}
        renderItem={renderRow}
      />
      <View style={styles.dotView}>
        {dataList.map((_, i) => {
          let opacity = position.interpolate({
            inputRange: [i - 1, i, i + 1],
            outputRange: [0.3, 1, 0.3],
            extrapolate: "clamp",
          });
          return (
            <Animated.View
              key={i}
              style={{
                opacity,
                height: 8,
                width: 8,
                borderRadius: 6,
                backgroundColor: "white",
                margin: 8,
              }}
            />
          );
        })}
      </View>
    </View>
  );
};

它在抱怨这一行 this.flatList.scrollToOffset({ animated: true, offset: scrollValue }); }, 3000)。 这是在我的 无限滚动 函数。

看起来，当屏幕失去焦点时，它仍然在搜索this.flatList.scrollToOffset。

Answer 1

You are not creating your ref properly，你必须使用 useRef 钩子，如果你使用的是功能组件或 createRef 在类组件的情况下，用于在你的组件中做参考。

看看这个。

https:/reactjs.orgdocshooks-reference.html#useref

创建您的参考文献，如下所示。

const flatListRef = useRef(null)

       <FlatList
          ref={flatListRef}
          // other props
       />

flatListRef.current.scrollToOffset({ animated: true, offset: scrollValue }) // access like this.