时间戳

首页 > 解决方案 > 处理 render() 函数中 componentDidMount() 中定义的变量

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

问题描述

我在 react 中遇到了 componentDidMount() 和 render() 的问题。

在我的componentDidMount()情况下，我正在进行 ajax 调用以从服务器（express+mysql）获取数据，并将这些数据设置在我的状态变量中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 not defined错误，这可能是因为在我的第一次渲染期间未定义 chartData，因为没有dashboardData 状态变量。如何处理这个。

constructor(props) {
        super(props)

        this.state = {
            dashboardData:[]
        }
    }

标签： javascriptreactjs

解决方案

传递一个空数组来处理初始渲染

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} />

推荐阅读