useState在重新渲染时一直被重置为初始值。

Question

所以，我的屏幕代码看起来像这样。我有一个 amount 的 useState，它在重新渲染时不断重置为初始值。我大约有三个 useEffects。其中一个在此示例代码中，我正在从数据库中获取金额，并使用 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

如何避免在重新渲染时，useState返回默认值？

- Rishabh876

Answer 1

它实际上并没有被重置为初始值。你只是一直在调用生成初始值的函数。

不要直接调用该函数，而是将它作为回调函数传递给 useState() hook （详见延迟初始状态），它只会被调用一次：

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

- Ori Drori

---

我实际上添加了这个函数来添加控制台日志。但是，即使我使用 useState(conversions.numberToBigNumber(0))，行为也是相同的。 - Rishabh876

不要在初始状态下直接调用函数 - 使用 useState(() => conversions.numberToBigNumber(0))。 - Ori Drori

好的，那么我之前调试的方式是错误的。这样解决了很多问题。谢谢。 - Rishabh876