React Native中如何从自定义组件更新Formik表单值

我基于React Native Picker制作了一个自定义组件，希望在选择选项时更新Formik中的表单值，但将setFieldValue作为回调函数传递给自定义组件属性时，提示变量未定义。请问如何从自定义组件中设置Formik的值？

解决步骤： #

• 第一步：在Formik的Render Props中解构setFieldValue
  Formik提供的setFieldValue是手动更新表单字段值的核心方法，你需要在Formik的回调参数里解构出这个方法——之前的代码未包含它，这是变量未定义的直接原因。
• 第二步：将setFieldValue传递给自定义Picker组件
  把setFieldValue封装成回调属性传给自定义Picker，同时修正代码里的拼写错误（callbeck建议改为onSelect，语义更清晰）。
• 第三步：在自定义Picker中调用setFieldValue
  在Picker的onValueChange事件里，调用传入的回调方法，传入字段名和选中的选项值，同时维护Picker自身的选中状态。

修改后的完整代码示例： #

Formik页面代码：

<Formik
  initialValues={{
    calltype: '',
    callfrom: '',
    callto: '',
    calldate: '',
    joinedby: [],
    tripinfo: {},
    additionalinfo: '',
    autoaccept: null,
  }}
  // validationSchema={CallValidationSchema}
  onSubmit={(values, {setSubmitting, resetForm}) => {
    setSubmitting(false);
    sendValues(values);
  }}>
  {{
    submitForm,
    handleBlur,
    touched,
    errors,
    values,
    handleChange,
    setFieldValue, // 新增解构setFieldValue
  } => (
    <View>
      <ARow
        row
        justifyContent="space-between"
        alignItems={'flex-end'}>
        <ACol col={6}>
          <CustomPicker
            onSelect={(field, value) => setFieldValue(field, value)} // 传递封装后的回调
            fieldname="calltype"
            data={pickerdata}
            inputBgColor="#F5F5F5"
            heading="Call Type"
            placeholder={'Select Call Type'}
            onerror={false}
            color={'#A9A9A9'}
            value={values.calltype}
          />
          {errors.calltype && touched.calltype ? (
            <AText color={'red'} pb={'5px'}>
              {errors.calltype}
            </AText>
          ) : null}
        </ACol>
        <ACol col={6}>
          <AText xtrasmall right>
            #1100669
          </AText>
        </ACol>
      </ARow>
   </View>
  )}}
</Formik>

自定义Picker组件代码：

const CustomPicker = ({
  fieldname,
  data,
  placeholder,
  color,
  value,
  onSelect, // 接收回调方法
}) => {
  const [selected, setSelected] = useState(value);

  // 同步Formik传入的选中值，避免状态不一致
  useEffect(() => {
    setSelected(value);
  }, [value]);

  return (
    <Picker
      style={{
        color: color ?? '#0D4D8D',
        margin: -16,
        height: 68,
        marginRight: -12,
        marginLeft: -4,
      }}
      selectedValue={selected}
      onValueChange={(itemValue, itemIndex) => {
        onSelect(fieldname, itemValue); // 调用回调更新Formik表单值
        setSelected(itemValue); // 更新组件自身选中状态
      }}>
      <Picker.Item style={{fontSize: 12}} value="" label={placeholder} />
      {data.length > 0 &&
        data.map(item => (
          <Picker.Item
            key={item.id} // 增加key属性，消除React列表渲染警告
            style={{fontSize: 12}}
            label={item.name}
            value={item.id}
          />
        ))}
    </Picker>
  );
};

内容的提问来源于stack exchange，提问作者Mohammed Maheswer