React Native中Formik依赖输入框UI不更新问题求助

问题根源 #

1. 类型不匹配：初始值amount和exchangeAmount都是字符串类型，但计算后的newVal是数字类型，而TextInput的value属性仅接受字符串，类型不匹配会导致UI无法正确渲染更新后的值。
2. 空输入处理缺失：当输入框清空时，计算会产生NaN，这也会导致UI渲染异常。

修复后的代码 #

<Formik
    validationSchema={validationSchema}
    initialValues={{
        amount: "",
        exchangeAmount: "",
    }}
    onSubmit={(values) => handleSubmit(values)}
>
    {({
        handleChange,
        handleBlur,
        handleSubmit,
        setFieldValue,
        values,
        errors,
        touched,
    }) => (
            <ScrollView>
                <TextInput
                    placeholder="Amount"
                    keyboardType="number-pad"
                    value={values.amount}
                    onChangeText={(val) => {
                        // 处理空输入，避免NaN
                        const numericVal = val ? parseFloat(val) : 0;
                        const newExchangeVal = rate ? numericVal / rate : 0;
                        // 统一转成字符串类型
                        setFieldValue("amount", val);
                        setFieldValue("exchangeAmount", newExchangeVal.toString());
                    }}
                />

                <TextInput
                    placeholder="Exchange Amount"
                    keyboardType="number-pad"
                    value={values.exchangeAmount}
                    onChangeText={(val) => {
                        const numericVal = val ? parseFloat(val) : 0;
                        const newAmountVal = rate ? numericVal * rate : 0;
                        setFieldValue("exchangeAmount", val);
                        setFieldValue("amount", newAmountVal.toString());
                    }}
                />
            </ScrollView>
    )}
</Formik>

额外优化建议 #

• 给rate添加非空/非零判断，避免出现除以0的异常。
• 如果需要固定小数位数，可以用toFixed(n)格式化数值，比如newExchangeVal.toFixed(2).toString()，根据业务需求调整小数位数。

内容的提问来源于stack exchange，提问作者Zahir Masoodi