Question

我在使用效果之外有一个定时电话,在屏幕不成像时,我如何明确时间?

例如,我有这方面的职能组成部分......

...

useEffect(() => {
  return () => clearTimeout(myTimeout)
}, [])

_getData = () => {
  fetch()
  .then(data => {
    let myTimeout = setTimeout(() => setSomething(!something), 5000)
  })
}

因此,在《法典》中,我称之为“植被(Data)”的其他地方,我不想在第一页的负荷时使用效果,而只是在采取某些行动的时候。在我获得数据后,我确定时间。但是,使用效果并不了解这一时间。

我已尝试确定这样的时间。

_getData... 
  setTimeoutVar(setTimeout(() => setSomething(!something), 5000))

useEffect...
 return () => clearTimeout(setTimeoutVar)

我尝试了其他几个令人厌恶的想法,但没有任何进展,我可以这样说。

想法?

Answer 1

每天就该问题开展工作,都写下了一个关于中途停留的问题,并用两分钟来表示。 !!

这个问题的答案是确定一个变数,以伪造,然后在数据回来时改变变量。然后有单独的使用效果功能,只处理这种情况。当变数变化发生时。如果变量是真实的,则规定时间分配和使用功能可追溯。

const [refresh, setRefresh] = useState(false)

useEffect(() => {
  let timeoutVariable

  if(refresh){
    timeoutVariable = setTimeout(() => setRefresh(false), 5000)
  }

  return () => clearTimeout(timeoutVariable)

}, [refresh]) 

_getData = () => {
  fetch()
  .then(data => {
    setRefresh(true)
  })
}

Answer 2

你再次遇到的问题源自时间分配的范围和时间以及你试图清除的时间。

Since the timeout is defined within the _getData function, it s not accessible in the useEffect cleanup function where you re attempting to clear it.

为确保您在部件不成批时能够清点时间,您需要以可在_getData功能和use Effect清理职能范围内查阅的方式储存时间。

实现这一目的的一个途径是使用ref(通过useRef)储存时间结算。这种做法确保了全时都能获得排外身份证,并可加以修改,而不会造成额外情况。

你们可以如何调整你的法典:

import React, { useState, useEffect, useRef } from  react ;

function YourComponent() {
  // State to manage something
  const [something, setSomething] = useState(false);
  // Ref to store the timeout ID
  const timeoutRef = useRef(null);

  useEffect(() => {
    // Cleanup function to clear the timeout when the component unmounts
    return () => {
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
      }
    };
  }, []);

  const _getData = () => {
    fetch()
    .then(data => {
      // Save the timeout ID in the ref
      timeoutRef.current = setTimeout(() => setSomething(!something), 5000);
    })
  };

  // Remember to call _getData somewhere in your component, like in response to an event

  return (
    // Your component JSX
  );
}

Ref Usage: Using useRef, we create a persistent reference (timeoutRef) that can hold the timeout ID. This ref does not trigger re-renders when its content changes, making it ideal for this use case.
Setting the Timeout: Inside _getData, after fetching data, we assign the timeout ID to timeoutRef.current. This makes the timeout ID accessible outside _getData, specifically in the useEffect cleanup function.
Clearing the Timeout: In the useEffect cleanup function, we check if timeoutRef.current has a value and use clearTimeout to clear it. This ensures that if the component unmounts, any active timeout is canceled, preventing the state update on an unmounted component (which would cause a React error).

友情链接