React Calendar Timeline 不显示获取的数据

Question

所以我来解决这个问题。 奇怪的是，即使我知道它在数组中，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);
  };

另外，我正在添加照片，其中第一张是在第一次渲染时。 第二个是当我打开检查元素工具时。

Answer 1

在此处输入图像描述

在此处输入图像描述

您的情况下的 visibleItems 是空数组，您需要确保 fetchApi 中的项目时间线在 defaultTimeStart 和 defaultTimeEnd 的范围内。 我认为你可以使用 visibleTimeStart/visibleTimeEnd 而不是 defaultTimeStart/defaultTimeEnd。 或者如果你想在这里使用默认值，你需要重置默认值（也许使用键）。