为什么图表在第二次点击后呈现 - react-chartjs-2

Question

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

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 操作）

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

传感器（Redux 减速器）

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

Answer 1

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

我建议在您的退货中添加一个条件。如果没有 Redux，我会这样做（我从未使用过 Redux）

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>
);

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