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(), []);

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

更新

我还面临一个问题，当访问LiveOrdStatus内部的LiveOrdStatus时，它显示“未调用：未定义”

是的，我现在明白这怎么可能发生。 基本上，初始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);
    }, []);

Answer 2

您应该在 useEffect 钩子中调用导致副作用的函数。

   const 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); });
   }
  
   useEffect(() => {
      LiveFetchData();
    } , [])

  useEffect(() => {
    const timerRef = setInterval(() => {

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

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

Answer 3

根据我的理解，您正在获取LiveFetchData() ，只有在userCard组件安装时才获取一次。 所以你可以在useEffect()里面调用它

useEffect(()=>{
 LiveFetchData(); // it will populate the status first
},[])

然后就可以正常调用setInterval来查看状态了。