React中useState(setState)设置数组项不符合预期，useEffect赋值失效问题

原有代码核心问题 #

1. 异步逻辑时序错误：axios.get是异步请求，调用axiosPull后会立即执行后续的done判断，此时三个请求还没有完成，done仍为初始值false，赋值逻辑永远不会触发。
2. useEffect配置错误：没有添加依赖数组，会在组件每次渲染后重复执行，造成无限请求的问题。
3. 变量存储逻辑错误：tempArr、done是组件内的普通变量，组件每次重渲染都会被重置为初始值，无法跨渲染周期、跨异步请求存储状态。

修复后代码 #

import { useState, useEffect } from 'react'
import axios from 'axios'

function YourComponent() {
  const [postData, setPost] = useState([])

  useEffect(() => {
    const axiosPull = async () => {
      const url = 'http://localhost/.../api/product/bookRead'
      const url2 = 'http://localhost/.../api/product/furnitureRead'
      const url3 = 'http://localhost/.../api/product/dvdRead'
      
      // 并行发起三个请求，等待所有请求返回结果
      const [bookRes, furnitureRes, dvdRes] = await Promise.all([
        axios.get(url),
        axios.get(url2),
        axios.get(url3)
      ])
      
      // 合并所有接口返回的数据
      const allData = [
        ...bookRes.data.data,
        ...furnitureRes.data.data,
        ...dvdRes.data.data
      ]
      
      // 直接更新状态
      setPost(allData)
    }

    axiosPull()
  }, []) // 空依赖数组，仅组件首次挂载时执行一次

  return (
    <div>    
      <div className="productContainer">
        <Post posts={postData} />
      </div>
    </div>
  )
}

修改说明 #

• 用Promise.all并行处理三个异步请求，等所有请求返回后再合并数据，完全避免了手动判断请求完成状态的时序问题
• 给useEffect添加空依赖数组，只会在组件首次挂载时执行一次请求，不会重复触发
• 移除了冗余的tempArr、done变量，直接用请求返回结果更新状态，逻辑更简洁不易出错

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