React合并双API数据时触发无限重渲染的问题求解

问题根源 #

你直接在组件的顶层渲染逻辑中调用setAllData，每次组件渲染时都会执行这个if判断。一旦nbaData和animeData不为空，就会触发setAllData更新allData状态，而状态更新又会导致组件重新渲染，进而再次执行setAllData，形成无限循环。

修复方案 #

将allData的更新逻辑移到useEffect中，通过监听nbaData和animeData的变化来触发更新，避免在渲染阶段直接修改状态。同时修正数据处理逻辑，确保生成符合预期的数组格式：

const [nbaData, setNbaData] = useState(null)
const [animeData, setAnimeData] = useState(null)
const [allData, setAllData] = useState(null)

const getData = async () => {
    // 获取NBA数据
    const nbaRes = await fetch(`https://www.balldontlie.io/api/v1/games?start_date=2023-03-10&end_date=2023-03-10`)
    const nbaResult = await nbaRes.json()
    if (nbaResult?.data) {
        setNbaData(nbaResult.data)
    }
    // 获取动漫数据
    const animeRes = await fetch(`https://animechan.vercel.app/api/random`)
    const animeResult = await animeRes.json()
    if (animeResult) {
        setAnimeData(animeResult)
    }
}

// 使用useEffect监听nbaData和animeData的变化，生成allData
useEffect(() => {
    if (nbaData && animeData) {
        // 提取动漫名称（假设animeData里的title字段是动漫名）
        const animeTitle = animeData.title
        const newAllData = nbaData.map(item => {
            // 每个球队缩写对应动漫名
            return { [item.home_team.abbreviation]: animeTitle }
        })
        setAllData(newAllData)
    }
}, [nbaData, animeData]) // 依赖数组：只有当nbaData或animeData变化时才执行

useEffect(() => {
    getData()
}, [])

额外说明 #

1. 原代码中for(let key in animeData)的逻辑会在第一次循环就return，导致每个数组项只取animeData的第一个键值对。如果你的目标是让所有球队对应同一个动漫名，直接提取animeData中的目标字段（比如title）即可，无需循环遍历对象键。
2. 增加了可选链?.判断nbaResult.data，避免数据结构异常导致报错。

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