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

Question

我在访问 if else 时遇到问题，if else 可以调用，但是两个块同时调用 if 块和 else 块
那么如果 else 阻塞，我如何才能正常工作
我的代码是

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钩。

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

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

I am facing one more problem , when accessing LiveOrdStatus insideelse 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);
    }, []);