时间戳

首页 > 解决方案 > 如何等待来自 API 的数据作为组件中的道具？

javascript - 如何等待来自 API 的数据作为组件中的道具？

问题描述

一旦我的数据从 API 加载，我正在尝试在组件上发送一个道具。但是，即使我使用 async await 来等待我的数据，我仍然收到以下错误：Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

我的过程：

我的问题：似乎当我在组件中传递数据时，React 不会等待我的数据加载并给我一个错误。

这是我的代码：


import useLoadRecords from '../../hooks/useLoadRecords'
import { CustomPieChart } from '../charts/CustomPieChart'

export const GameDistribution = () => {
const { records, loading } = useLoadRecords()
  let data = records

  console.log(data) // This logs out the records array

  return (
    <div>
      // once loading is false, render these components
      {!loading ? (
        <>
          <div>
            {recordGames.length > 0 ? (
              // This line seem to run as soon as the page loads and I think this is the issue. recordGames is empty at first, but will populate itself when the data loads
              records.length > 0 && <CustomPieChart data={data} />
            ) : (
              <div>
              No games
              </div>
            )}
          </div>
        </>
      ) : (
       <span>Loading...</span>
      )}
    </div>
  )
}


// useLoadRecords.js

import { useState, useEffect } from 'react'
import { API } from 'aws-amplify'
import { listRecordGames } from '../graphql/queries'

// Centralizes modal control
const useLoadRecords = () => {
  const [loading, setLoading] = useState(false)
  const [records, updateRecords] = useState([])

  useEffect(() => {
    fetchGames()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  const fetchGames = async () => {
    try {
      let recordData = await API.graphql({
        query: listRecordGames,
      })

      setLoading(false)

      let records = recordData.data.listRecordGames.items.map(
        (item) => item.name
      )
      let result = Object.values(
        records.reduce((acc, el) => {
          if (!acc[el]) acc[el] = { name: el, plays: 0 }
          acc[el].plays++
          return acc
        }, {})
      )
      updateRecords(result)
    } catch (err) {
      console.error(err)
    }
  }

  return { records, loading }
}

export default useLoadRecords

标签： javascriptreactjsasync-awaitcomponentsreact-props

解决方案

我会为数据制作一个钩子，并在获取时对其设置数据，您可以使用扩展运算符克隆数据并传递它。或仅当数据中有某些内容时才更好地返回该组件

{
data &&  <CustomPieChart data={recordGames} />
}

并且最好使用您的加载钩子制作一些加载器（gif/svg），以便在仍在获取数据时显示它。

推荐阅读