我在时间轴日历中绘制项目数组时遇到了问题。同时,组数组工作正常。如果手动提供值,项目数组也工作正常。
项目仅在按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);
}
1条答案
按热度按时间juud5qan1#
我用这个代码解决了:
参考链路