javascript - IF Else 语句在 setInterval() 函数中无法正常工作

Question

我在访问 if else 时遇到问题，if else 可以调用，但两个 block 同时调用 if block 和 else block

那么如果 else block 我怎样才能正常工作

我的代码是

const UserCard=(props)=>{


const[LiveOrdStatus,setStatus] = useState();
const[order_ID,setordid] = useState(props.orderId);

const labels=["Order","Confirm","Ready","Deliver","Delivred"];
let number = 0;

function LiveFetchData(){
   fetch('https://example.in/app/live_update.php', {
      method: 'POST',
      mode: 'no-cors',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        'S_KEY':'84014',
        'order_id':order_ID,
      })
    }).then((response) => response.json())
    .then((json) => {
      setStatus(json.order_status);
      //console.log(json.order_status);
    }).catch((err) => { console.log(err); });
}

LiveFetchData();
   setInterval(() => {
        if(LiveOrdStatus==="DELIVERED")
        {
         console.log("its okk :"+LiveOrdStatus);
        }else{
         console.log("not called :");
        }
  }, 10000);

 }

我的输出是

Answer 1

您正在每个渲染周期调用并设置一个间隔，据我所知，您永远不会清除任何间隔。您可能只想在安装组件时启动一个间隔。不要忘记在组件卸载时返回一个清理函数来清除任何运行间隔。

useEffect(() => {
  const timerRef = setInterval(() => {
    if (LiveOrdStatus === "DELIVERED") {
      console.log("its okk :", LiveOrdStatus);
    } else {
      console.log("not called :");
    }
  }, 10000);

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

您还在函数体中直接调用LiveFetchData();，这将导致渲染循环，因为它也会更新状态。我不确定您希望何时调用此函数，但您可能还想将其放入 useEffect Hook 中。

useEffect(() => LiveFetchData(), []);

这将在组件安装时调用它一次，但如果您需要更频繁地调用它，那么您应该弄清楚任何依赖项是什么或添加额外的间隔计时器等...

更新

I am facing one more problem , when accessing LiveOrdStatus inside else than it show " not called : undefined "

是的，我现在明白这是怎么发生的了。基本上，初始 LiveOrdStatus 被封闭在 setInterval 回调范围内。

使用 React ref 缓存当前的 LiveOrdStatus 状态值并在时间间隔内访问该值。

    const LiveOrdStatusRef = React.useRef();

    useEffect(() => {
      LiveOrdStatusRef.current = LiveOrdStatus;
    }, [LiveOrdStatus]);

    useEffect(() => {
      const timerRef = setInterval(() => {
        if (LiveOrdStatus === "DELIVERED") {
          console.log("its okk :", LiveOrdStatusRef.current);
        } else {
          console.log("not called :", LiveOrdStatusRef.current);
        }
      }, 10000);

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