当我加载 api 请求并且我的反应组件尝试呈现时，我总是收到数据未定义错误

Question

所以我试图使用一些尚未获取的数据，所以我收到了一个未定义的错误。 有没有办法不做出乐观的反应并以某种方式等待值？ 谢谢！

我的代码：

const Dashboard = () => {
  const { loading, error, data, refetch } = useQuery(DASHBOARD)
  const [page, setPage] = useState(1)
  const sales = data.sales
  const balance = data.info.balance
  const resultsPerPage = 6
  const totalResults = sales.length

  const onPageChange = p => {
    setPage(p)
  }

  useEffect(() => {
    setData(sales?.slice((page - 1) * resultsPerPage, page * resultsPerPage))
  }, [page, sales])
  if (loading) return 'Loading...'
  if (error) return `Error! ${error.message}`
  return (
        <InfoCard title="Alle Kunden" value={response.totalclients}>
          <RoundIcon
            icon={PeopleIcon}
            iconColorClass="text-orange-500 dark:text-orange-100"
            bgColorClass="bg-orange-100 dark:bg-orange-500"
            className="mr-4"
          />
        </InfoCard>
  )
}

export default Dashboard

我的错误：

Cannot read property 'sales' of undefined

Answer 1

您正在尝试在填充之前使用“数据”。 你不需要“等待”它发生，因为它已经通过“useQuery”钩子为你完成了。

查询完成时侦听的标准方法是检查“加载”值。 只要是真的，查询就没有完成，所以暂时不要使用数据。 'loading' 为 false 后，组件被重新渲染，所以现在是使用 'data' 的好时机。

例如，在您的代码中，执行以下操作（或类似操作）：

const Dashboard = () => {
  const { loading, error, data, refetch } = useQuery(DASHBOARD)
  if(loading) return <Loading />; //make one :)

  const [page, setPage] = useState(1)
  const sales = data.sales
  const balance = data.info.balance
  const resultsPerPage = 6
  const totalResults = sales.length

  const onPageChange = p => {
    setPage(p)
  }

  useEffect(() => {
    setData(sales?.slice((page - 1) * resultsPerPage, page * resultsPerPage))
  }, [page, sales])
  if (loading) return 'Loading...'
  if (error) return `Error! ${error.message}`
  return (
        <InfoCard title="Alle Kunden" value={response.totalclients}>
          <RoundIcon
            icon={PeopleIcon}
            iconColorClass="text-orange-500 dark:text-orange-100"
            bgColorClass="bg-orange-100 dark:bg-orange-500"
            className="mr-4"
          />
        </InfoCard>
  )
}

export default Dashboard

应该管用。