reactjs - Fetch- und setInterval-react-Hooks-Problem

Ich habe kürzlich Hooks mit React verwendet, um Daten vom Server abzurufen, aber ich habe ein Problem mit den Hooks. Der Code scheint korrekt zu sein, aber es sieht so aus, als ob useEffect beim ersten Mal nicht aufgerufen wird, sondern erst 3 Sekunden später mit setInterval. Ich habe für 3 Sekunden eine leere Tabelle, bevor sie erscheint. Ich möchte die Daten direkt anzeigen und sie 3 Sekunden später aufrufen.

Wie ist die richtige Art, es zu verwenden?

const [datas, setDatas] = useState([] as any);

useEffect(() => {
  const id = setInterval(() => {
    const fetchData = async () => {
      try {
        const res = await fetch(URL);
        const json = await res.json();
        setDatas(jsonData(json));
      } catch (error) {
        console.log(error);
      }
    };
    fetchData();
  }, TIME)

  return () => clearInterval(id);
}, [])

Antwort #1

Sie müssen fetchData einmal anfangs außerhalb des Intervalls aufrufen. Definieren Sie fetchData außerhalb des Intervalls.

useEffect(() => {
  // (1) define within effect callback scope
  const fetchData = async () => {
    try {
      const res = await fetch(URL);
      const json = await res.json();
      setDatas(jsonData(json));
    } catch (error) {
      console.log(error);
    }
  };
    
  const id = setInterval(() => {
    fetchData(); // <-- (3) invoke in interval callback
  }, TIME);

  fetchData(); // <-- (2) invoke on mount

  return () => clearInterval(id);
}, [])

Antwort #2

Mit React Hooks:

  const [seconds, setSeconds] = useState(0)

  const interval = useRef(null)

  useEffect(() => { if (seconds === 60) stopCounter() }, [seconds])

  const startCounter = () => interval.current = setInterval(() => {
    setSeconds(prevState => prevState + 1)
  }, 1000)

  const stopCounter = () => clearInterval(interval.current)