如何渲染依赖API数据的React组件？dataRecords未定义报错怎么解决

核心错误点 #

• useState初始值类型错误：dateRecords初始值被设为数字0，后续调用数组专属方法map时，数字类型不存在该方法，直接触发异常。初始值需替换为空数组[]。
• 渲染逻辑声明为异步函数：renderRecords被定义为async函数，React组件的渲染逻辑是同步执行的，异步函数返回的是Promise对象而非可直接渲染的JSX，导致渲染内容不符合预期。且map是同步方法，无需使用await调用。
• 组件传参逻辑错误：调用renderRecords时传入的是已经实例化的<GameItem />元素，而非组件本身，内部渲染调用逻辑不符合React规范。
• 根return语句JSX语法错误：条件判断部分包裹了多余的大括号，不符合JSX语法规则。
• 状态管理逻辑冗余：自定义HookuseGetRecords已经返回了data和loading状态，无需额外通过useEffect+异步函数二次存储到本地state，多余逻辑会提升状态不同步的风险。

修复后最简代码 #

// Component.js
import { useGetRecords } from '你的自定义Hook路径'

// 子组件挪到父组件外部，避免每次父组件渲染时重复创建实例
const GameItem = ({ game }) => {
  return <div>{game.name}</div>
}

const GameTable = ({ records }) => {
  return <div>
    {records.map((game, index) => (
      <GameItem key={index} game={game} />
    ))}
  </div>
}

export const History = () => {
  // 直接给接口返回的data设置默认空数组，避免undefined报错
  const { data: dateRecords = [], loading } = useGetRecords()

  return (
    // 加载状态可自行替换为加载动画，此处和原逻辑一致返回空
    !loading && dateRecords.length > 0 && <GameTable records={dateRecords} />
  )
}

如果你确实需要将接口数据存储到本地state做二次修改，可使用以下兼容写法：

import { useState, useEffect } from 'react'
import { useGetRecords } from '你的自定义Hook路径'

const GameItem = ({ game }) => {
  return <div>{game.name}</div>
}

const GameTable = ({ records }) => {
  return <div>
    {records.map((game, index) => (
      <GameItem key={index} game={game} />
    ))}
  </div>
}

export const History = () => {
  // 初始值设置为空数组
  const [dateRecords, setDateRecords] = useState([])
  const { data, loading } = useGetRecords()

  useEffect(() => {
    if (data) {
      setDateRecords(data)
    }
  }, [data])

  return (
    !loading && dateRecords.length > 0 && <GameTable records={dateRecords} />
  )
}

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