【发布时间】：2022-08-16 14:58:47
【问题描述】：
所以我来解决这个问题。奇怪的是，即使我知道它在数组中，React-Calendar-Timeline 组件也不显示获取的项目。但是，当我打开检查元素时，项目会按应有的方式呈现，并且一切都开始工作了。
我尝试通过在获取数据时实现加载屏幕来解决问题，但是问题仍然存在。
以下是时间线组件代码：
{!isLoading ? (
<CalendarContainer>
<Timeline
groups={rooms}
items={tenantsInCalendar} // this part is not rendering at the first time
defaultTimeStart={startDate}
defaultTimeEnd={endDate}
canResize={\"both\"}
stackItems
onItemSelect={handleItemClick}
onItemDeselect={() => dispatch(setCurrentTenant(null))}
minZoom={24 * 60 * 60 * 1000} // min zoom is 24 hours.
dragSnap={24 * 60 * 60 * 1000} // snap is at 24 hours.
canMove={true}
itemHeightRatio={0.75}
onItemMove={handleItemMove}
onItemResize={handleItemResize}
timeSteps={{
day: 1,
month: 1,
year: 1,
}}
></Timeline>
</CalendarContainer>
) : (
<Spinner />
)}
获取方法：
useEffect(() => { // converting fetched data to object for better/faster properties changement
fetchedTenants &&
setTenantsToObject(convertTenantsToObject(fetchedTenants));
}, [fetchedTenants]);
useEffect(() => { // converting tenants to other object type for calendar to understand. This data is rendered in calendar component.
tenantsToObject &&
setTenantsInCalendar(
convertTenantsToCalendarObjectItems(Object.values(tenantsToObject))
);
}, [tenantsToObject]);
useEffect(() => {
if (tenantsInCalendar.length > 0 && isLoading) {
handleTimeout(1000);
}
}, [tenantsInCalendar]);
const handleTimeout = (time) => { // sets some timeout for calendar to really render data at the first time. However, still doesn\'t work as it should.
setTimeout(() => {
setIsLoading(false);
}, time);
};
标签： javascript reactjs react-hooks react-calendar