React表格加载更多功能失效问题求助

你的代码点击「Load more」无效果的核心原因：

• 每次请求新页面时，setClients(response.data.content)直接覆盖了旧数据，没有保留之前的列表
• 点击按钮只是增加了显示数量，但clients数组里本来就只有当前页的10条数据，所以slice后还是显示10条，看不到新数据

修正步骤 #

1. 累积数据而非替换：修改setClients逻辑，将新请求的数据追加到已有列表中
2. 点击按钮触发下一页请求：移除冗余的displayedClientsCount状态，点击按钮时直接递增currentPage，触发useEffect请求下一页数据
3. 优化交互体验：新增状态判断是否还有更多数据、是否正在加载，避免重复请求并合理控制按钮显示

修改后的完整代码 #

export function TableClients({ result, title }: ITableComponent) {
  const [clients, setClients] = useState<IClient[]>([]);
  const [currentPage, setCurrentPage] = useState(1);
  const clientsPerPage = 10;
  const [hasMore, setHasMore] = useState(true);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    const fetchClients = async () => {
      if (isLoading) return;
      setIsLoading(true);
      try {
        const response = await axios.get('http://localhost:8080/api/clients', {
          params: {
            page: currentPage - 1,
            size: clientsPerPage,
          },
        });
        // 合并新旧数据，保留已有内容
        setClients(prevClients => [...prevClients, ...response.data.content]);
        // 根据接口返回的分页标记判断是否还有下一页
        setHasMore(!response.data.last);
      } catch (error) {
        console.error('加载客户数据失败:', error);
      } finally {
        setIsLoading(false);
      }
    };
    fetchClients();
  }, [currentPage, searchTerm, sortOrder]);

  const handleLoadMore = () => {
    setCurrentPage(prevPage => prevPage + 1);
  };

  return (
    <Box>
      <TableHeader title={title} result={result} />
      <Table>
        <Table.Thead>
          <Table.Tr>
            <Table.Th>Cliente</Table.Th>
          </Table.Tr>
        </Table.Thead>
        <Table.Tbody>
          {clients.map((client, index) => (
            <Table.Tr key={index}>
              <Client name={client.name} />
            </Table.Tr>
          ))}
        </Table.Tbody>
      </Table>
      <Flex>
        {/* 仅在有更多数据且未加载时显示按钮 */}
        {hasMore && !isLoading && (
          <Button variant="filled" onClick={handleLoadMore}>
            Load more
          </Button>
        )}
        {isLoading && <span>加载中...</span>}
      </Flex>
    </Box>
  );
}

关键细节说明 #

• 数据累积逻辑：setClients(prev => [...prev, ...response.data.content]) 确保新请求的数据追加到已有列表后，不会覆盖之前的内容
• 分页触发：点击按钮时更新currentPage，自动触发useEffect请求对应页码的数据
• 状态控制：hasMore根据接口返回的last字段判断是否还有下一页，isLoading避免重复发起请求，提升用户体验
• 冗余状态移除：直接渲染所有已加载的clients数据，不再需要displayedClientsCount控制显示数量

内容的提问来源于stack exchange，提问作者Helio Bentzen