如何使用useEffect更新react chart js 2的数据？

问题描述

我有需要在仪表板页面上创建图表的模块。我正在使用 React Chart Js 2 https://www.npmjs.com/package/react-chartjs-2 作为图表。现在，此图表数据基于通过获取日期范围的开始和结束在 api 上对其进行过滤。当控制台记录响应时，它有一个值，但它没有准确地应用于图表。

图表很好
使用日期范围过滤数据也很好

这里的主要问题是当我过滤数据时，它不能准确地实时更新图表的移动，但我已经使用了 React 的 UseEffect 来更新状态。

图表默认值的状态：

    const [selectionRange,setSelectionRange] = useState({
        startDate: new Date(Date.Now() - 15 * 24*60*60*1000),endDate: new Date(),key: "selection"
    })

    useEffect(() => {
        dispatch(fetchChartNewData({
            start:moment(selectionRange.startDate).format("YYYY-MM-DD"),end:moment(selectionRange.endDate).format("YYYY-MM-DD"),}))
    },[fetchChartNewData])

   const list_filter_countings =  useSelector((state) => state.dashboard.list_filter_countings.data);

这是图的过滤器状态

const [graphData,setGraphData] = useState({
    receive:list_filter_countings.receive,data_receive_grouped:list_filter_countings.data_receive_grouped,deposit:list_filter_countings.deposit,});

useEffect(() => {
    
},[graphData,list_filter_countings])

日期范围函数：

const RangeHandler = (range) => {

    const valueOfInput1 = range[0].format();
    const valueOfInput2 = range[1].format();


    dispatch(fetchChartNewData({
        start:range[0].format(dateFormat),end:range[1].format(dateFormat),}))

    setSelectionRange({
        startDate: valueOfInput1,endDate: valueOfInput2,key: "selection"
    });

    dataDate({
        startDate: valueOfInput1,key: "selection"
    })

    setGraphData({
        receive:list_filter_countings.receive,})

  
}

图表的日期集：

useEffect(() => {
    setChartData({
        labels: dataDate(selectionRange),datasets: [
            {
                label: 'Receive Check',backgroundColor: 'rgb(195 218 251 / 35%)',borderColor: '#70a8f3',pointBackgroundColor: "#fff",pointBorderWidth: '2',fill: true,lineTension: 0.0,poinTradius: 7,borderWidth: 1,data: randomVal(),}
        ]
    })

    console.log(list_filter_countings.data_receive_grouped);
    
},[selectionRange,fetchChartNewData]);

最后这里是我想在图表中传递的数据。

const randomVal = () => {      

    var randomArr = []
    var from = new Date(selectionRange.startDate);
    var to = new Date(selectionRange.endDate);

    

   if(list_filter_countings.data_receive_grouped) {
        for (var day = from; day <= to; day.setDate(day.getDate() + 1)) {
                    
            list_filter_countings.data_receive_grouped.map((rows) => {
                randomArr.push(rows.amount)
            })
        }  
        return randomArr
   }
}

这是我当前的输出

如你所见，没有图表，但有数据。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascript react-chartjs reactjs reactjs