如何在Axios请求后筛选20条数据？除SQL行号查询外的方法

下面是几种在前端从100条数据中提取20条的可行方法，不需要修改后端SQL查询：

1. 接口回调中直接截取数据存入状态 #

拿到接口返回的完整数据后，用数组的slice方法直接截取需要的20条，再存入state。这种方式适合只需要展示固定20条的场景，节省后续渲染的计算量。

const [list, setList] = useState([]);

useEffect(() => {
    axios.get('http://localhost:8080/movielist/getMovieList_boxoffice')
        .then(res => {
            // slice(startIndex, endIndex) 左闭右开，这里取前20条
            const targetData = res.data.slice(0, 20);
            setList(targetData);
        })
        .catch(err => console.log(err))
}, [already_released]);

// 直接渲染处理后的列表
{list.map((item, index) => (
    <ol key={index}>
        <li>objectnum = {index + 1}</li>
    </ol>
))}

2. 保留完整数据，渲染时截取 #

如果需要保留全部100条数据用于其他操作（比如后续切换分页），可以把完整数据存在state里，渲染的时候再截取20条展示。

const [fullList, setFullList] = useState([]);

useEffect(() => {
    axios.get('http://localhost:8080/movielist/getMovieList_boxoffice')
        .then(res => {
            setFullList(res.data); // 保存完整的100条数据
        })
        .catch(err => console.log(err))
}, [already_released]);

// 渲染时只取前20条
{fullList.slice(0, 20).map((item, index) => (
    <ol key={index}>
        <li>objectnum = {index + 1}</li>
    </ol>
))}

3. 分页式提取（灵活切换不同批次的20条） #

如果需要支持分页功能，比如切换查看第1-20、21-40条，可以通过状态管理当前页码，动态计算要截取的数据范围。

const [fullList, setFullList] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
const pageSize = 20; // 每页固定20条

useEffect(() => {
    axios.get('http://localhost:8080/movielist/getMovieList_boxoffice')
        .then(res => {
            setFullList(res.data);
        })
        .catch(err => console.log(err))
}, [already_released]);

// 计算当前页要展示的数据
const currentPageData = fullList.slice(
    (currentPage - 1) * pageSize,
    currentPage * pageSize
);

// 渲染当前页数据
{currentPageData.map((item, index) => (
    <ol key={index}>
        <li>objectnum = {(currentPage - 1) * pageSize + index + 1}</li>
    </ol>
))}

// 分页控制按钮（示例）
<div>
    <button onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))}>上一页</button>
    <button onClick={() => setCurrentPage(prev => Math.min(prev + 1, Math.ceil(fullList.length / pageSize)))}>下一页</button>
</div>

注意点 #

• slice是数组的纯函数，不会修改原数组，只会返回新的子数组，安全可靠
• slice(start, end)是左闭右开区间，比如slice(20,40)会提取索引20到39的元素，正好20条
• 保留完整数据的方案，后续切换数据批次不需要重新请求接口，体验更流畅

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