无法将Riot API对局数据存入React state数组问题求助

不需要引入Redux解决该问题，当前故障属于React基础用法错误，核心诱因有三点：

• 直接调用push修改state原值，React的状态检测机制无法识别这类原地修改操作，不会触发页面重渲染
• 内部封装的getMatchesInformation函数没有返回axios请求生成的Promise，外部调用时无法拿到请求结果
• 遍历对局ID发起请求时未处理异步时序，既无法保证返回数据和ID列表顺序一致，也容易因闭包缓存旧状态值导致更新异常

函数组件（React Hooks）写法 #

这也是你当前使用的场景，核心是用useState返回的setter函数更新状态，采用函数式更新规避闭包问题，同时正确返回Promise让限流逻辑正常生效：

import { useState } from 'react'
import Bottleneck from 'bottleneck'
import axios from 'axios'

// 组件内初始化状态
const [matches, setMatches] = useState([])
const [isLoading, setIsLoading] = useState(false)

const loadPlayerMatchData = async (puuid) => {
  const API_KEY = MYRIOTAPIKEY
  // 初始化时重置状态
  setIsLoading(true)
  setMatches([])

  // 配置限流器
  const limiter = new Bottleneck({ minTime: 500 })

  // 封装带限流的单局数据请求，必须return Promise
  const fetchSingleMatch = limiter.wrap((matchId) => {
    return axios.get(`https://americas.api.riotgames.com/tft/match/v1/matches/${matchId}?api_key=${API_KEY}`)
      .then(res => res.data)
  })

  try {
    // 拉取对局ID列表
    const idRes = await axios.get(`https://americas.api.riotgames.com/tft/match/v1/matches/by-puuid/${puuid}/ids?api_key=${API_KEY}`)
    const matchIds = idRes.data

    // 方案1：逐局加载逐局渲染，用户可以更快看到已加载完成的对局，自动保证和ID列表顺序一致
    for (const id of matchIds) {
      const matchData = await fetchSingleMatch(id)
      // 函数式更新，永远基于最新的前序状态追加数据，避免闭包导致的数据覆盖
      setMatches(prevList => [...prevList, matchData])
    }

    // 方案2：等所有对局加载完成后一次性渲染，替换上面的for循环即可
    // const allMatchData = await Promise.all(matchIds.map(id => fetchSingleMatch(id)))
    // setMatches(allMatchData)

  } catch (err) {
    console.error('拉取对局数据失败:', err)
  } finally {
    setIsLoading(false)
  }
}

类组件写法 #

如果你后续切换到类组件，只需要记住不能直接修改state，必须通过setState做函数式更新即可，单条数据返回后的更新逻辑如下：

this.setState(prevState => ({
  playerMatchInfo: [...prevState.playerMatchInfo, res.data]
}))

• 永远不要直接修改state的原始值，不管是数组push、对象属性修改这类原地操作，都不会触发React的重渲染，必须生成新的数组/对象传给状态更新方法
• 异步场景下更新状态优先使用函数式写法，避免闭包缓存的旧状态值导致数据丢失、覆盖
• Bottleneck的限流逻辑依赖传入函数返回Promise，只要正确return axios的请求实例，限流规则就会正常生效
• 如果需要调整对局展示顺序（比如按对局时间倒序），只需要在数据全部加载完成后对matches数组做一次排序即可，不需要额外引入全局状态管理库

Redux这类工具仅适用于跨多层级组件共享状态的场景，当前单组件内的状态更新问题引入Redux只会徒增项目复杂度，没有实际收益

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