处理render()函数中componentDidMount()中定义的变量

时间:2018-08-20 07:22:39

标签: javascript reactjs

我在react中遇到componentDidMount()和render()这个问题。

在我的GROUP_CONCAT(CATEGORY)中,我进行了ajax调用以从服务器(express + mysql)获取数据,并在状态变量componentDidMount()中设置了此数据

dashboardData

在我的componentDidMount() { const headers = { 'Authorization': localStorage.getItem('authToken') } axios.get('http://localhost:3001/getDashboardData', {headers}) .then(res => { this.setState({ dashboardData: res.data.data }) }) } 中,我正在做类似的事情

render()

但是在这里我遇到了const data = this.state.dashboardData const chartData = data.map(function(record) { return { labels: [record.Received, record.Approved, record.Pending], datasets: [{ data: [300, 50, 100], backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'], hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'] }] } }) const chart = <Doughnut data={chartData} width={100} height={100} /> 错误,这可能是因为在我第一次渲染chartData时未定义,因为没有dashboardData状态变量。如何处理。

chartData not defined

4 个答案:

答案 0 :(得分:0)

我认为您的Doughnut组件高度依赖数据道具,因此我建议您隐藏Doughnut组件,直到您收到ajax的响应

return (
   const chart = {data.length>0 && (<Doughnut data={chartData} width={100} height={100} />)}
)

答案 1 :(得分:0)

传递一个空数组以处理初始呈现

const data = this.state.dashboardData || [];
if(data.length == 0){
  return <div>No data available</div>;
}
const chartData = data.map(function(record) {
    return {
        labels: [record.Received, record.Approved, record.Pending],
        datasets: [{
            data: [300, 50, 100],
            backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
            hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
        }]
    }
})

const chart = <Doughnut data={chartData} width={100} height={100} />

答案 2 :(得分:0)

您可以添加条件运算符,该条件运算符将false或data.map的结果返回到chartData

const chartData = data && data.map()

答案 3 :(得分:0)

U还可在获取仪表板数据时添加加载程序。提取数据后,您就可以基于此呈现组件。

componentDidMount() {
  axios.get('http://localhost:3001/getDashboardData', {headers})
  .then(res => {
      this.setState({
          dashboardData: res.data.data,
          loader: false   // set it as true in initial state
      })
   })
   .catch(err => {
       this.setState({
           loader: false
       })
   })
}

const chart = this.state.loader ? <Loader /> : <Doughnut data={chartData} width={100} height={100} />

在图表数据中,您可以处理空数组,并显示适当的味精。