ref.current всегда возвращает нуль с реагирующими хуками, когда я использую flatList

Question

ошибка всегда возникала, когда я передаю ref элементу renderItem, который передается компоненту flatList, здесь я хочу манипулировать самим элементом с помощью ссылок, но я всегда получаю эту ошибку

вот мой фрагмент кода

import React, { useState, useRef, useEffect } from 'react';
import { View, Text, FlatList, Button } from 'react-native';
import Animated, { Transitioning, Transition } from 'react-native-reanimated';
import PropTypes from 'prop-types';
import styles from './styles';

const AnimatedHorizontalList = ({ data }) => {
  const [list, setList] = useState([]);

  const ref = useRef();

  const transition = (
    <Transition.Sequence>
      <Transition.Out delayMs={200} type="scale" />
      <Transition.Change delayMs={200} interpolation="easeInOut" />
      <Transition.In delayMs={2000} type="fade" />
    </Transition.Sequence>
  );

  useEffect(() => {
      ref.current.animateNextTransition();
      setList(data);
  });

  const renderItem = ({ item }) => {
    return (
      <Transitioning.View ref={ref} transition={transition}>
        <View>
          <Text>{item}</Text>
        </View>
      </Transitioning.View>
    );
  };

  return (
    <View style={styles.container}>
      <FlatList horizontal data={list} renderItem={renderItem} />
    </View>
  );
};

AnimatedHorizontalList.propTypes = {};
export default AnimatedHorizontalList;

Answer 1

Когда вы используете useRef() в строке const ref = useRef();, вы можете запустить ref со значением по умолчанию, чтобы вы могли написать const ref = useRef({ animateNextTransition: () => {} });, чтобы он не прерывался на строке ref.current.animateNextTransition();