使用useEffect和useState反應未定義的狀態

跨多個組件獲得相同的（狀態）未定義錯誤。我已經檢查并看到資料確實來自 API，沒有被 CORS 或其他東西阻止，并且可用于 useEffect 回呼。問題似乎在于設定狀態。我嘗試用 useRef 鉤子替換 useState 鉤子，并在訪問 ref.current 時得到了相同的結果。

真正奇怪的是，幾天前一切正常，所以我開始處理后端代碼，以便今天用白屏進行改進。

熟悉的錯誤：

未捕獲的型別錯誤：無法訪問屬性“地圖”，資料未定義

Dashboard.tsx索引路由。

export default function Dashboard() {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState<ServiceStatus[]>([]);

  useEffect(() => {
    setLoading(true);
    server.monitor.services()
      .then(data => setData(data))
      .finally(() => setLoading(false));
  }, []);

  return (
    <div>
      <Title order={2}>Dashboard</Title>
      <BackToTop />
      <div>
        <LoadingOverlay visible={loading} overlayBlur={2} />
        {data
          .map(svc => <ServiceStatusListItem key={svc.value?.ServiceName} status={svc} />)}
      </div>
    </div>
  );
}

服務器.ts

export const server = {
  monitor: {
    services: async () => {
      const url = `${hostname}/Monitor/Services`;
      const statuses = await fetch(url, addAuthorization()).then(resp => resp.json());
      return statuses as ServiceStatus[];
    }
  }
};

截圖可在https://imgur.com/a/Rbgi8Ba獲得。

uj5u.com熱心網友回復：

您必須等待 jsx 渲染直到加載完成，我假設資料陣列的長度大于 0

export default function Dashboard() {
    const [loading, setLoading] = useState(true);
    const [data, setData] = useState<ServiceStatus[]>([]);
  
    useEffect(() => {
      setLoading(true);
      server.monitor.services()
        .then(data => setData(data))
        .finally(() => setLoading(false));
    }, []);
    if(loading) return <p>Loading...</p>
    return (
      <div>
        <Title order={2}>Dashboard</Title>
        <BackToTop />
        <div>
          <LoadingOverlay visible={loading} overlayBlur={2} />
          {data
            .map(svc => <ServiceStatusListItem key={svc.value?.ServiceName} status={svc} />)}
        </div>
      </div>
    );
  }

uj5u.com熱心網友回復：

我認為，datais contains value =undefined 所以你應該檢查它的資料是否包含所謂的虛假值以外的一些值，例如 (NULL, undefined)

你可以這樣做

{data?.map(svc => <ServiceStatusListItem key={svc.value?.ServiceName} status={svc} />)}

或者

{if(data) {data.map(svc => <ServiceStatusListItem key={svc.value?.ServiceName} status={svc} />)}}

或者

{data && data.map(svc => <ServiceStatusListItem key={svc.value?.ServiceName} status={svc} />)}

正如你所提到的，這里的 useState 有問題你應該嘗試

useEffect(() => {
    setLoading(true);
    server.monitor.services()
      .then((data) => {setData(data)})
      .finally(() => setLoading(false));
  }, []);

uj5u.com熱心網友回復：

我的猜測是，您必須暫停執行，直到 Promise 得到解決，然后按以下方式執行此操作，

  useEffect(() => {
    setLoading(true);
    
    const fetchStatuses = async () => {
      const res = await server.monitor.services()
      .then(data => setData(data))
      .finally(() => setLoading(false));
      return res
    }

    fetchStatuses()
  }, []);

有關在 useEffect 掛鉤中使用異步函式的更多詳細資訊，請參閱此鏈接。

標籤：反应 打字稿 反应钩子 反应域

上一篇：for回圈僅列印實時市場中dict的最后一個值

下一篇：代表用戶設定身份驗證的最佳方式？