onChangeText已被使用时如何为TextInput设置额外状态更新逻辑

问题根因 #

你的代码存在三个核心问题导致丢失最后一位字符：

• 语法错误：子组件AppFormField内部没有定义bn变量，你在onChange回调中传递的bn是无效值，实际读取的是父组件的旧状态
• 事件用法错误：React Native的TextInput的onChange回调返回的是原生事件对象，不会直接返回输入文本，你没有从事件中提取最新输入值
• 状态更新异步问题：Formik的setFieldValue更新内部values是异步操作，你如果在回调中直接读取还没更新的values[name]，必然会拿到上一次的旧值，差一个字符

修复方案 #

不需要额外用onChange回调，直接在onChangeText中同时处理Formik赋值和父组件传值即可，此时拿到的text是实时最新的输入内容，不会出现字符缺失。

修复后的子组件代码 #

function AppFormField({ name, width, childToParent, ...otherProps }) {
  const { setFieldTouched, setFieldValue, errors, touched, values } =
    useFormikContext();

  return (
    <>
      <TextInput
        onBlur={() => setFieldTouched(name)}
        onChangeText={(text) => {
          setFieldValue(name, text);
          // 直接把最新的输入文本传给父组件，不需要读异步更新的values
          childToParent(text);
        }}
        value={values[name]}
        width={width}
        {...otherProps}
      />
      <ErrorMessage error={errors[name]} visible={touched[name]} />
    </>
  );
}

父组件的代码不需要改动，这样每次输入都会把最新的文本同步给Formik和父组件的bn状态，不会出现最后一位丢失的问题。

内容的提问来源于stack exchange，提问作者Nelson Kehinde