reactjs 仅在f12或调整窗口大小后呈现的React时间轴日历项

pkwftd7m  于 2023-03-01  发布在  React
关注(0)|答案(1)|浏览(112)

我在时间轴日历中绘制项目数组时遇到了问题。同时,组数组工作正常。如果手动提供值,项目数组也工作正常。
项目仅在按f12或调整浏览器窗口大小后呈现。

以下是前端代码我检查了后端,它工作正常。

import React, { useEffect, useState } from 'react'
import Timeline from 'react-calendar-timeline'
// make sure you include the timeline stylesheet or the timeline will not be styled
import 'react-calendar-timeline/lib/Timeline.css'
import moment from 'moment'
import { getProd } from '../services/frontendRoutes'

export default function Production() {

    const [groups, setGroups] = useState([]);
    const [items, setItems] = useState([]);

    const fetchData = async () => {
        try {
            const { data } = await getProd();
            setGroups(data.data.groups);
            const item = data.data.items;
            let itemss = item.map(i => {
                i.start_time = moment(i.start_time, 'YYYY-MM-DDTHH:mm:ss');
                i.end_time = moment(i.end_time, 'YYYY-MM-DDTHH:mm:ss');
                return i;
            })
            setItems(itemss);
        } catch (err) {
            console.log(err)
        }
    }

    useEffect(() => {
        fetchData()
    }, [])

    return (
        <div>
            <div>
                Production
                <Timeline
                    groups={groups}
                    items={items}
                    defaultTimeStart={moment().startOf('year').toDate()}
                    defaultTimeEnd={moment().endOf('year').toDate()}
                />
            </div>
        </div>
    )
}

/*
const { data } = await getProd();
            setGroups(data.data.groups);
            gruups = data.data.groups
            console.log('Gruups', gruups)
            const item = data.data.items;
            let itemss = item.map(i => {
                i.start_time = moment(i.start_time, 'YYYY-MM-DDTHH:mm:ss');
                i.end_time = moment(i.end_time, 'YYYY-MM-DDTHH:mm:ss');
                return i;
            })
            console.log('Itemms', itemss);
            setItems(itemss);*/
            
            
 //Below is the axios request code to fetch data from backend
 
 import axios from 'axios'
const apiUrl_prod = 'http://localhost:8000/api/prod';
const apiUrl_sub = 'http://localhost:8000/api/sub'
const apiUrl_paint = 'http://localhost:8000/api/paint'
const apiUrl_final = 'http://localhost:8000/api/final'

export function getProd() {
    return axios.get(apiUrl_prod);
}

export function getSub() {
    return axios.get(apiUrl_sub);
}

// export async function getPaint() {
//     try {
//         const res = await axios.get(apiUrl_paint);
//         console.log(res.data)
//     }
//     catch (err) {
//         console.log(err);

//     }
// }

export function getPaint() {
    //console.log('success');
    return axios.get(apiUrl_paint)
}

export function getFinal() {
    return axios.get(apiUrl_final);
}

juud5qan

juud5qan1#

我用这个代码解决了:

{groups.length!=0 && items.length!=0 && <Timeline

参考链路

相关问题