React TypeScript中Load More按钮失效求助及优化方案咨询

问题根源 #

1. FakeStoreAPI 参数错误：你的getProducts函数使用了page参数，但FakeStoreAPI的/products接口并不支持page，它采用的是skip（跳过指定条数数据）和limit（每页返回条数）参数。传入无效的page会导致每次请求都返回前limit条数据，所以点击加载更多时拿到的是重复内容。
2. 数据更新逻辑错误：当前setProducts(data)是直接用新请求的数据覆盖原有列表，就算参数正确，也会丢失之前的内容，无法实现“加载更多”的追加效果。

修复步骤 #

1. 修正API请求函数 #

将page参数转换为skip，计算方式为skip = (page - 1) * limit，修改后的代码如下：

const instance = axios.create({
    baseURL: "https://fakestoreapi.com/",
})

export const getProducts = async (page = 1, limit = 5) => {
    const skip = (page - 1) * limit;
    const { data } = await instance.get<IProduct[]>("products", {
        params: {
            skip,
            limit
        }
    });
    return data; 
}

2. 修改组件内的数据更新逻辑 #

在获取新数据后，将其追加到现有列表中，而非直接替换：

useEffect(() => {
  const fetchProducts = async () => {
    try {
      setLoading(true)
      setError('')
      const data = await getProducts(page);
      // 追加新数据到现有列表
      setProducts(prevProducts => [...prevProducts, ...data]);
      setLoading(false)
    } catch (error: unknown) {
      setLoading(false)
      setError("Network Error!")
    }
  }

  fetchProducts()
}, [page]);

3. 可选：添加无更多数据的判断 #

新增状态判断是否还有数据可加载，避免无效请求：

// 新增状态
const [hasMore, setHasMore] = useState<boolean>(true);

// 在获取数据后更新hasMore状态
const data = await getProducts(page);
setProducts(prevProducts => [...prevProducts, ...data]);
// 如果返回数据条数小于limit，说明无更多数据
setHasMore(data.length === limit);

修改按钮显示条件：

{!loading && hasMore && <button onClick={loadMore}>Load more</button>}
{!loading && !hasMore && <p>没有更多产品了</p>}

完成以上修改后，点击加载更多按钮就能正确获取下一页数据并追加到列表中，不会再出现重复数据的问题。

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