Доступ к значению состояния внутри другой функции - useState

#reactjs #react-native

#reactjs #реагировать — родной

Вопрос:

Как я могу получить доступ к обновленному значению состояния? Я получаю обновленные значения в пользовательском интерфейсе, но не при доступе к значению состояния «на лету».

 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 amp;amp; 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;

Обновление: какова правильная структура для доступа к состоянию? Это только с useEffect или мы можем справиться с пользовательским хуком, который вернет состояние? Трудность, которую я вижу в моей структуре, для доступа к значению внутри отдельных функций.

Ответ №1:

Пожалуйста, замените приведенный ниже код и дайте мне знать

 
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 amp;amp; 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;