undefined 不是 object（评估“_this.el”）

Question

*我在 react native 中使用 flatlist 组件中的 ref 属性，但我得到一个 undefined is not an

object 错误。 看了很多地方

上网但没有得到满意的答复。 请帮我：）*

    const DATA = [
        {
            id: 0,
            title: "First Item",
        },
        {
            id: 1,
            title: "Second Item",
        },
    ];

    const [selectedId, setSelectedId] = useState(null);

    **React.useEffect(() => {
        this.el.scrollToIndex({ animated: true, index:selectedId});
      }, []);**
    
    const Item = ({ item, onPress, style }) => (
        <TouchableOpacity onPress={onPress} style={[styles.item, style]}>
            <Text style={styles.title}>{item.title}</Text>
        </TouchableOpacity>
    );

    const renderItem = ({ item }) => {
        const backgroundColor = item.id === selectedId ? "#6e3b6e" : "#f9c2ff";
        return (
          <Item
            item={item}
            onPress={() => setSelectedId(item.id)}
            style={{ backgroundColor }}
          />
        );
      };

       
    return (
        <>
 
                <FlatList
                    data={DATA}
                    horizontal={true}
                    renderItem={renderItem}
                    keyExtractor={(item) => item.id}
                    extraData={selectedId}
                    **ref={(el) => this.el = el}**strong text
                />
        </>
    )
}```

Answer 1

要使用 ref，您需要使用useRef （因为您使用的是 function 组件）。 在 function 组件上，您不会发现自己在使用this 。 使用useRef时，您需要使用.current来访问项目本身。 所以，你可以看到我在做el.current.scrollToIndex

此外，您需要将selectedId作为依赖项添加到您的useEffect

export default function App() {
  const DATA = [
        {
            id: 0,
            title: "First Item",
        },
        {
            id: 1,
            title: "Second Item",
        },
        {
            id: 2,
            title: "Second Item",
        },
        {
            id: 3,
            title: "Second Item",
        },
        {
            id: 4,
            title: "Second Item",
        },
        {
            id: 5,
            title: "Second Item",
        },
        {
            id: 6,
            title: "Second Item",
        },
    ];

    const [selectedId, setSelectedId] = React.useState(null);
    const el = React.useRef()

    React.useEffect(() => {
        el.current.scrollToIndex({ animated: true, index:selectedId});
      }, [selectedId]);
    
    const Item = ({ item, onPress, style }) => (
        <TouchableOpacity onPress={onPress} style={[styles.item, style]}>
            <Text style={styles.title}>{item.title}</Text>
        </TouchableOpacity>
    );

    const renderItem = ({ item }) => {
        const backgroundColor = item.id === selectedId ? "#6e3b6e" : "#f9c2ff";
        return (
          <Item
            item={item}
            onPress={() => setSelectedId(item.id)}
            style={{ backgroundColor }}
          />
        );
      };

       
    return (
        <>
 
                <FlatList
                    data={DATA}
                    horizontal={true}
                    renderItem={renderItem}
                    keyExtractor={(item) => item.id}
                    extraData={selectedId}
                    ref={el}
                />
        </>
    )
}