API返回250个对象，仅存前10个却仅添加第10个的问题

你这段代码只保留第10个对象的核心问题是React状态更新的异步特性：
在循环里每次调用setTop10([...top10, ...])时，top10捕获的都是组件初始渲染时的空数组状态。也就是说，10次循环里的每一次更新，都是把当前元素加到空数组里，最后10次状态更新会被合并，只剩最后一次的结果（也就是第10个元素）。

给你两种可行的解决办法，推荐第二种更高效：

方法一：使用函数式状态更新 #

利用React状态更新的函数形式，它会接收上一次的最新状态作为参数，这样每次循环都能基于前一次的结果追加元素：

useEffect(()=>{
    fetch('https://tennis-live-data.p.rapidapi.com/rankings/ATP', options)
        .then(response => response.json())
        .then(response => {
            for(let i=0;i<10;i++){
                // 改用函数式更新，基于上一次的状态prevTop10来追加
                setTop10(prevTop10 => [...prevTop10, response.results.rankings[i]])
            }
        })
        .catch(err => console.error(err))
},[])

方法二：一次性截取前10个元素（推荐） #

没必要循环调用10次状态更新，直接用数组slice方法截取前10个元素，一次性更新状态，性能更好：

useEffect(()=>{
    fetch('https://tennis-live-data.p.rapidapi.com/rankings/ATP', options)
        .then(response => response.json())
        .then(response => {
            // 直接截取前10个元素，一次性设置状态
            const first10Rankings = response.results.rankings.slice(0, 10);
            setTop10(first10Rankings);
        })
        .catch(err => console.error(err))
},[])

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