如何在反应钩子中按系列显示图表

问题描述

index.tsx

    const [ data,setData ] = useState({});
    const [ dataChart,setDataChart] = useState({});
    const [ isLoading,setIsLoading ] = useState(false);
 const fetchChartDetail = useCallback(async (data?) => {
        if (data && Object.keys(data).length > 0 && data['data'].length > 0) {
            data['data'].map(async (res) => {
                try {
                    await getAll({start: 1,length: 45,sensor: data.sensor}).then((response) => {
                        let DATA = {
                            ...response,id: res['id'],sensor: res['sensor'],chart: [{
                                ...configChart,data: response && response['data'] ? response['data']['data'] : []
                            }]
                        }

                        if (res.spinning) {
                            res['spinning'] = false;
                        }
                        const data = {...res,data: response && response['data'] ? response['data']['data'] : []
                            }]};

                            if (!res.spinning) setDataChart(DATA);
                    });
                } catch (err) {
                    setError(err);
                }
            })
        }
    },[])
    const fetchData = useCallback(async (params?,status?) => {
        try {
            await getLatest().then((response) => {
                let DATA = response['data']['data'];
                DATA = Object.values(DATA.map((obj) => {
                    return {
                        ...obj,spinning: true,}
                }));

                response['data']['data'] = DATA;
                
                if (!status) {
                    setData(response['data']);
                    setIsLoading(false);
                    fetchChartDetail(response['data']);
                }
            })
        }catch(err) {
            setError(err)
        }
    },[])

    useEffect(() => {
        let ignore = false;
        setIsLoading(true)
        const timeout = setTimeout(() => {
            fetchData(null,ignore);
        });
        return () => {
            ignore = true;
            clearTimeout(timeout);
        };
    },[fetchData]);

return (
        <>
            {
                isLoading ? (<Loading src={`/images/icons/gif/loader.gif`} imgStyle={imgStyle} />) :
                <div className="md:flex content-center flex-wrap -mx-2 p-3">
                    {
                        data && Object.keys(data).length > 0 && data['data'].length > 0 ? 
                        (
                            data && data['data'].map((item,idx) => (
                                <div key={idx} className="md:flex md:w-1/2 lg:w-1/2 xl:w-1/3 px-2 py-2">
                                    <div className="md:flex-1 p-4 rounded shadow-lg bg-white border-b border-r border-grey-dark" onClick={() => routeDetail(router,item)}>
                                       <div className="flex flex-col">
                                            <Room config={{ item: item,...configRoom }} index={idx} />
                                       </div>
                                       <div>
                                            <Echart config={dataChart && dataChart['chart'] ? dataChart['chart'] : [configChart]} loading={item.spinning} colors={colors} dataZoom={true} />
                                       </div>
                                    </div>
                                </div>
                            ))
                        ) : ('NO DATA')
                    }
                </div>
            }
        </>
    );

我在这里要做的是按系列显示折线图，或者如果数据已经完成，那么它将显示数据。但我的问题是例如我有 3 个图表然后在从图表 1 中获取第一个所有数据后它将显示然后下一个获取数据是图表 2 但它会在图表 2 上显示数据图表 2 它将显示图表的数据聊天2中的1，则图表1的数据为空。

在控制台上，当它控制台 dataChart 第一次加载

{ data: [...],name: 'chart1'}
{ data: [],name: 'chart2'}
{ data: [],name: 'chart3'}

二次加载

{ data: [],name: 'chart1'}
{ data: [...],name: 'chart3'}

第三次加载

{ data: [],name: 'chart2'}
{ data: [...],name: 'chart3'}

它应该是这样的：

第一次加载

{ data: [...],name: 'chart1'}

二次加载

{ data: [...],name: 'chart2'}

第三次加载

{ data: [...],name: 'chart3'}

解决方法

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

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

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