ReactJs如何在从数据库获取所有数据后隐藏加载更多选项？

import React, { useState, useEffect } from 'react';

const MyComponent = () => {
  const [data, setData] = useState([]);
  const [showLoadMore, setShowLoadMore] = useState(true);

  useEffect(() => {
    // 从数据库获取所有数据的逻辑
    fetchDataFromDatabase();
  }, []);

  const fetchDataFromDatabase = () => {
    // 使用适当的方法从数据库获取所有数据，并将数据存储在data状态变量中
    // 示例代码，假设从数据库获取的数据为response
    const response = ['data1', 'data2', 'data3'];
    setData(response);

    // 判断是否还有更多数据需要加载
    if (response.length < 10) {
      setShowLoadMore(false);
    }
  };

  const loadMoreData = () => {
    // 从数据库获取更多数据的逻辑
    fetchMoreDataFromDatabase();
  };

  const fetchMoreDataFromDatabase = () => {
    // 使用适当的方法从数据库获取更多数据，并将新数据追加到已有数据中
    // 示例代码，假设从数据库获取的新数据为newData
    const newData = ['data4', 'data5', 'data6'];
    const updatedData = [...data, ...newData];
    setData(updatedData);

    // 判断是否还有更多数据需要加载
    if (newData.length < 10) {
      setShowLoadMore(false);
    }
  };

  return (
    <div>
      {/* 渲染数据列表 */}
      {data.map((item, index) => (
        <div key={index}>{item}</div>
      ))}

      {/* 渲染加载更多选项 */}
      {showLoadMore && (
        <button onClick={loadMoreData}>加载更多</button>
      )}
    </div>
  );
};

export default MyComponent;