等待页面加载数据后再发送

时间:2020-10-21 02:55:24

标签: reactjs

我有一个useEffect用来设置状态数据。我想在页面渲染之前先加载状态(jiraticketdata)。该页面当前正在渲染不包含jiraticket数据的div,因此我认为该数据尚未加载。

这是我的代码:

import React, { useContext, useEffect, useState } from 'react'
import { LoadingContext } from '../../../context/loading-context'
import { SnackbarContext } from '../../../context/snackbar-context'
import { UserContext } from '../../../context/user-context'
import {get} from '../../../functions/Rest'
import { Pie } from 'react-chartjs-2'


const defects = () => {
    const loading = useContext(LoadingContext)
    const snackbar = useContext(SnackbarContext)
    const user = useContext(UserContext)

    const [jiraticketsData, setJiraTicketsData] = useState('')

    useEffect(() => {
        async function onLoadJiraTicketData() {
          loading.setLoading(true)
          const results = get(`get_jira_tickets`, user.user)
          if (results.status === 0) {
              setJiraTicketsData(results.data)
          } else if (results.status >=20 && results.status <=30){
            snackbar.statusCheck(results)
            user.setSessionTokenMatches(false)
          } else snackbar.statusCheck(results)
            loading.setLoading(false)
        }
        onLoadJiraTicketData()

      }, [])


  return (!jiraticketsData ? <div>does not have jiraticketsData</div> :
    <div className="jiraTicketChart" >
      <Pie data={jiraticketsData.pie_chart}/>
    </div>

  )
}


export default defects

1 个答案:

答案 0 :(得分:0)

您需要将异步功能移出使用效果之外。