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。 或者如果你想在這里使用默認值，你需要重置默認值（也許使用鍵）。