reactjs - 当我使用 flatList 时，ref.current 总是用反应钩子返回 null

Question

当我将 ref 传递给传递给 flatList 组件的 renderItem 元素时，总是发生错误，我在这里想要的是用 refs 操作项目本身，但我总是得到这个错误

这是我的代码片段

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();