在另一个 function 中访问 state 值 - useState

Question

How can I access the updated value of the state? I am getting updated values on UI but not while accessing state value on the fly.

const OTP = () => {

  const [counter, setCounter] = useState(3);
  const [someState, setSomeState] = useState("something");

  useEffect(() => {
    startCountdownTimer();
  }, []);

  const countdownTimerFunc = () => {
    let value = counter; // <--- initial value always
    // someState <--- initial value always
    console.log('==== countdown: START====', counter); 
    if (value && value > 0) {
        setCounter(prev => prev - 1); // Updating right value
    } else {
      console.log('==== countdown: STOP====');
    }
  };

  const startCountdownTimer = () => {
    setSomeState("updated something");
    internalID = BackgroundTimer.setInterval(() => {
      countdownTimerFunc();
    }, 1000);
  };

  const counterUI = () => {
      return (
          <Text>{counter}</Text>
      )
  }

  ...

  return (
     <View>
       {counterUI()}
     </View>
  )
};

export default OTP;

Update: What is the right structure to access the state? Is it only with useEffect or can we handle with custom hook which will return state? The difficulty which am seeing in my structure to access the value inside seperate functions.

Answer 1

Please replace below code and let me know

const OTP = () => {

  const [counter, setCounter] = useState(3);
  const [someState, setSomeState] = useState("something");

  useEffect(() => {
    if (counter > 0) {
      countdownTimerFunc()
    }else{
      startCountdownTimer();
    }

  }, [counter]);

  const countdownTimerFunc = () => {
    let value = counter; // <--- initial value always
    // someState <--- initial value always
    console.log('==== countdown: START====', counter);
    if (value && value > 0) {
      setCounter(counter - 1); // Updating right value
    } else {
      console.log('==== countdown: STOP====');
    }
  };

  const startCountdownTimer = () => {
    setSomeState("updated something");
    setTimeout(() => {
      countdownTimerFunc();
    }, 1000);
  };

  const counterUI = () => {
    return (
      <Text>{counter}</Text>
    )
  }

  ...

return (
  <View>
    {counterUI()}
  </View>
)
};

export default OTP;