useState가 계속 초기값으로 재설정됨재렌더 시

useState가 계속 초기값으로 재설정됨재렌더 시

그래서 화면 코드는 이렇게 생겼어.나는 UseState를 가지고 있다.amount리렌더에서 초기값으로 계속 재설정되는 경우.useEffects가 3개 정도 있어.그 중 하나는 여기 샘플 코드에 있는데, 나는 db에서 금액을 받고 setAmount를 사용하여 설정한다.

const ConfirmPaymentDialog = props => {
   const getInitialVal = () => {
      console.log('Initial Amount: 0');
      return conversions.numberToBigNumber(0);
   };
   const [amount, setAmount] = useState<BigNumber>(getInitialVal());

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

   const getAmountToPay = async () => {
    const amount = await myDbModule.getAmount(customer.id);
    console.log('DB Amount: ' + amount?.toString());
    setAmount(amount || conversions.numberToBigNumber(0));
  };

   useEffect(() => {
   ...
   }, [isInputTextFocused])

  console.log('Rendering');
  return (<View>...</View>);
}

이 화면을 열면.다음 콘솔 로그가 있는 경우

 LOG  Initial Amount: 0
 LOG  Rendering
 LOG  DB Amount: 500
 LOG  Initial Amount: 0
 LOG  Rendering
 LOG  Initial Amount: 0
 LOG  Rendering
 LOG  Initial Amount: 0
 LOG  Rendering
 LOG  Initial Amount: 0
 LOG  Rendering
 LOG  Initial Amount: 0
 LOG  Rendering

재렌더 시 사용 상태를 기본값으로 재설정하지 못하게 하는 방법

실제로 초기값으로 리셋된 것은 아니다.초기값을 생성하는 함수를 계속 호출하면 된다.콜백(callback)이라고 부르지 않고 (태만적인 초기 상태 참조)으로 넘겨준다.useState()훅을 채우면, 한 번 부르게 될 것이다.

const [amount, setAmount] = useState<BigNumber>(getInitialVal); // getInitialVal instead of getInitialVal()

참조URL: https://stackoverflow.com/questions/60903691/usestate-keeps-getting-reset-to-initialvalue-on-re-render