有條件地渲染組件

Question

我正在使用 setimeout 模擬異步事件，因此在 3 秒后它將一個值推送到數據數組。

然后我檢查數組長度以有條件地渲染組件，但即使在 isEmpty 為 false 之后，Loading 組件也不會改變。 它一直顯示正在加載....，這是第一次渲染。

這是下面的完整代碼

import { useState, useEffect } from 'react';

export default function App() {
  const [isEmpty, setisEmpty] = useState(true);
  const data = [];
  
useEffect(() => {
  setTimeout(() => {
    data.push('newvalue');
    console.log(data);
    console.log('Array Length: ', data.length);
  }, 
    3000);
    console.log('Array Length: ', data.length);
    if(data.length > 0){
      setisEmpty(false);
    }else{
      setisEmpty(true);
    }
}, [])

    return (
     <>
     {isEmpty ? <h1>Loading...</h1> : <h1>Data Available</h1>}
     </>
  );
}

Answer 1

嘗試將數據設為 state，然后使用 useEffect 更新空標志。

import { useState, useEffect } from "react";

export default function App() {
  const [isEmpty, setisEmpty] = useState(true);
  const [data, setData] = useState([]);

  useEffect(() => {
    setTimeout(() => {
      const temp = [...data];
      setData([temp, "newvalue"]);
      console.log(data);
      console.log("Array Length: ", data.length);
    }, 3000);
  }, []);

  useEffect(() => {
    console.log("Array Length: ", data.length);
    if (data.length > 0) {
      setisEmpty(false);
    } else {
      setisEmpty(true);
    }
  }, [data]);

  return <>{isEmpty ? <h1>Loading...</h1> : <h1>Data Available</h1>}</>;
}

Answer 2

你的 map function 里面有一個額外的 {，可能是這導致了問題。