反应时间轴日历项目仅在 f12 或调整窗口大小后呈现

Question

在时间轴日历中绘制项目数组时遇到问题。同时，组阵列工作正常。如果手动提供值，项目数组也可以正常工作。

项目仅在按 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);
}

Answer 1

我用那个代码解决了：

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

reference link