Javascript 为什么在第二次单击后显示图表-react-chartjs-2

我用React-chartjs-2在React应用程序中创建了一个图表。我在主页上有两项：“图表1”和“图表2”。当我点击“图表1”时，图表显示没有数据。第二次单击后，数据将正确呈现。接下来我想渲染“chart2”，但在点击该项目之后，“chart1”渲染。第二次单击后，“图表2”的数据将正确呈现。 你知道有什么问题吗？我想在第一次单击后渲染每个图表

Chart.js

import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Line } from 'react-chartjs-2';

import { getChartData } from '../../actions/sensors';

const Chart = (props) => {

  const [chartDataState, setChartDataState] = useState({});

  const createChart = () => {
    const id = props.match.params.id;
    props.getChartData(id);

    setChartDataState({
      labels: props.chartData.map(data => {
        const date = new Date(data.delivery_time).toLocaleDateString();
        const time = new Date(data.delivery_time).toLocaleTimeString();
        return `${time} | ${date}`;
      }),
      datasets: [
        {
          data: props.chartData.map(data => data.sensor_data),
          fill: false,
          backgroundColor: '#987316',
          borderColor: 'rgba(152, 115, 22, 0.2)',
        },
      ],
    })
  }

  useEffect(() => {
    createChart();
  }, [])

  return (  
    <div className="container">
      <div className="head" style={{'marginBottom': '30px'}}>
        <h2>Chart</h2>
        <div className="line" style={{"width": "900px"}}></div>
      </div>
      <div className="chart">
        <Line
          data={chartDataState}
          options={{
            maintainAspectRatio: false,
            legend: {
              display: false,
            }
          }}
          height={400}
        />
      </div>
    </div>
  );
}

const mapStateToProps = state => ({
  chartData: state.sensors.chartData,
})
 
export default connect(mapStateToProps, { getChartData })(Chart);

传感器（Redux减速器）

---

第一次单击时，会触发数据请求，但组件不会在渲染之前等待该数据

我建议你在报税表上加上一个条件。如果没有Redux，我会这样做（我从未使用过Redux）

返回（
图表
{chartDataState.length>0？
：正在加载…}
);

---

基本上：您不希望您的组件在返回数据之前呈现图表。

当您第一次单击时，会触发数据请求，但您的组件不会在呈现之前等待该数据

我建议你在报税表上加上一个条件。如果没有Redux，我会这样做（我从未使用过Redux）

返回（
图表
{chartDataState.length>0？
：正在加载…}
);

基本上：您不希望您的组件在返回数据之前呈现图表。

现在“加载…”一直在呈现，我看不到任何图表。条件（我放置ChartDataState.length>0的位置）需要基于状态或道具，在状态更改时会更新。现在“加载…”一直在渲染，我看不到任何图表。条件（我放置ChartDataState.length>0的位置）需要基于状态或道具，在状态更改时更新。

export const getChartData = id => (dispatch, getState) => {

  const token = getState().auth.token;

  const config = {
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Token ${token}`
    }
  } 

  axios.get(`${baseURL}/sensors_data/list/${id}`, config)
  .then(res => {
    dispatch({
      type: GET_CHART_DATA,
      payload: res.data
    })
  })
  .catch(err => console.log(err))
}

import { GET_CHART_DATA } from '../actions/types';

const initialState = {
  chartData: [],
}

export default function(state = initialState, action) {
  switch(action.type) {
    case GET_CHART_DATA:
      return {
        ...state,
        chartData: action.payload
      }
    default:
      return state;
  }

return (  
  <div className="container">
    <div className="head" style={{'marginBottom': '30px'}}>
      <h2>Chart</h2>
      <div className="line" style={{"width": "900px"}}></div>
    </div>
    <div className="chart">
      {chartDataState.length > 0 ? 
      <Line
        data={chartDataState}
        options={{
          maintainAspectRatio: false,
          legend: {
            display: false,
          }
        }}
        height={400}
      />
      : <div>Loading...</div>}
    </div>
  </div>
);