Question

我在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

Answer 1

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

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

Answer 2

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

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

Answer 3

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

const chartData = data && data.map()

Answer 4

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

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

处理render（）函数中componentDidMount（）中定义的变量

4 个答案: