如何在平面列表中应用onEndReached？

import React, { useState, useEffect } from 'react';
import { FlatList, View, Text } from 'react-native';

const MyComponent = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    // 初始化数据
    fetchData();
  }, []);

  const fetchData = () => {
    // 模拟从服务器获取数据
    setLoading(true);
    setTimeout(() => {
      const newData = [...data, ...newDataFromServer];
      setData(newData);
      setLoading(false);
    }, 2000);
  };

  const renderListItem = ({ item }) => {
    return (
      <View>
        <Text>{item.title}</Text>
      </View>
    );
  };

  const handleEndReached = () => {
    if (!loading) {
      fetchData();
    }
  };

  return (
    <FlatList
      data={data}
      renderItem={renderListItem}
      keyExtractor={(item) => item.id.toString()}
      onEndReached={handleEndReached}
      onEndReachedThreshold={0.1}
    />
  );
};

export default MyComponent;