React TypeScript中从状态展示API获取的数据问题求助

我通过Axios从Strapi API获取数据并存入React状态，但不知道如何在网页中展示完整的返回数据。尝试用map函数时要么无法显示，要么报错。以下是我的代码和获取到的数据情况：

我的代码 #

import axios from "axios"
import React, { useState, useEffect } from "react"


function AdministrationPanel() {
  const [inqueries, getInqueries] = useState<any[]>([])
  const token ="**************************************************"
  const url = "https://strapi-km.herokuapp.com/api/inquiries?populate=*"

  useEffect(() => {
    axios
      .get(url, {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      })
      .then((response) => {
        const InqueriesData = response.data
        console.log(InqueriesData)
        getInqueries(InqueriesData)
      })
  }, [])
  console.log(inqueries)
  return (
    <>
      <div>
        {this.state.inqueries.map(({ name }: any) => {
          return <p>{name}</p>
        })}
      </div>
    </>
  )
}

export default AdministrationPanel

数据情况 #

• 控制台响应：返回的是包含data数组的对象，所有查询数据都在这个数组里
• 应用状态：当前状态存的是整个响应对象，而非里面的data数组

问题原因及修复方案 #

1. 状态赋值错误 #

Strapi API返回的结构是{ data: Array<查询数据>, meta: ... }，你现在把整个响应对象存进了状态，但实际要展示的是response.data.data这个数组。

2. 函数组件误用this.state #

函数组件里不能用类组件的this.state语法，直接使用定义好的inqueries状态变量即可。

3. 处理空数组边界情况 #

组件初始化时inqueries是空数组，虽然map空数组不会报错，但可以添加加载提示提升体验。

修正后的完整代码 #

import axios from "axios"
import React, { useState, useEffect } from "react"

// 可选：定义类型替代any，更规范
interface Inquiry {
  id: number
  attributes: {
    name: string
    // 其他字段根据你的数据补充
  }
}

function AdministrationPanel() {
  const [inqueries, setInqueries] = useState<Inquiry[]>([])
  const [loading, setLoading] = useState(true)
  const token ="**************************************************"
  const url = "https://strapi-km.herokuapp.com/api/inquiries?populate=*"

  useEffect(() => {
    axios
      .get(url, {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      })
      .then((response) => {
        // 取响应里的data数组存入状态
        setInqueries(response.data.data)
        setLoading(false)
      })
      .catch(err => {
        console.error('获取数据失败:', err)
        setLoading(false)
      })
  }, [])

  if (loading) {
    return <div>加载中...</div>
  }

  return (
    <div>
      {inqueries.length === 0 ? (
        <p>暂无查询数据</p>
      ) : (
        inqueries.map((inquiry) => {
          // Strapi数据的字段在attributes里
          return <p key={inquiry.id}>{inquiry.attributes.name}</p>
        })
      )}
    </div>
  )
}

export default AdministrationPanel

关键说明 #

• 状态更新用更语义化的setInqueries命名（原getInqueries不符合React setState命名惯例）
• 添加了loading状态处理加载过程
• 给map的元素添加了key属性，符合React列表渲染要求
• 从inquiry.attributes中取字段，因为Strapi的单条数据结构是{ id: xxx, attributes: {...} }

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