React函数式组件父传子props出现undefined、有值交替异常如何解决？

问题产生原因 #

1. 你发起的5个Axios请求为异步并行执行，不同请求的响应返回时间不固定，每次请求成功后调用setXxx更新状态都会触发父组件重渲染，子组件也会随之重新渲染，因此会出现多次控制台打印。
2. 出现undefined的核心原因是部分请求的响应数据不符合预期：当接口返回的res.data本身为undefined、或请求报错走catch分支时，你没有做兜底处理直接赋值给状态，会把初始为数组的状态覆盖为undefined。另外控制台打印引用类型时展示的是展开时的最新值，不是打印时刻的实际值，会让你误以为父组件状态一直正常。

修复方案 #

1. 状态赋值加类型兜底
   所有状态更新时都判断是否为数组，保证状态永远为数组类型，避免出现undefined：

// 示例，所有set操作都按这个格式修改
setLogData(Array.isArray(res.data) ? res.data : [])

2. 统一等待所有请求完成再渲染子组件
   新增loading状态，用Promise.all批量处理请求，所有请求完成后再渲染子组件，减少不必要的多次重渲染：

// 父组件新增loading状态
const [loading, setLoading] = useState(true)

// 把原来的useEffect替换为以下代码
useEffect(() => {
  const fetchAllData = async () => {
    try {
      const [logRes, storageRes, logQuoRes, prodQuoRes, storeQuoRes] = await Promise.all([
        axios.get("http://localhost:8080/api/logisticsrecords"),
        axios.get("http://localhost:8080/api/storageshipment"),
        axios.get("http://localhost:8080/api/logisticsquotation"),
        axios.get("http://localhost:8080/api/productquotation"),
        axios.get("http://localhost:8080/api/storagequotation")
      ])
      setLogData(Array.isArray(logRes.data) ? logRes.data : [])
      setStorageData(Array.isArray(storageRes.data) ? storageRes.data : [])
      setLogQuotation(Array.isArray(logQuoRes.data) ? logQuoRes.data : [])
      setProductQuotation(Array.isArray(prodQuoRes.data) ? prodQuoRes.data : [])
      setStorageQuotation(Array.isArray(storeQuoRes.data) ? storeQuoRes.data : [])
    } catch (err) {
      console.error('批量请求出错：', err)
    } finally {
      setLoading(false)
    }
  }
  fetchAllData()
}, [])

渲染子组件时增加loading判断：

{!loading && <DashboardHome 
  storage={storageData} 
  logistics={logdata}
  storeQuotation={storageQuotation}
  prodQuotation={productQuotation}
  logisticsQuotation={logquotation}
/>}

3. 子组件增加兼容判断
   子组件使用props数组前先做类型校验，避免后续逻辑报错：

// 示例：取数组长度
const storageLen = Array.isArray(storage) ? storage.length : 0

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