为什么当我设置多个功能时，Formik的handleChange不起作用？

Question

我在 formik 上遇到问题，当我在 onValueChange 中添加其他函数时，formik 的 handleChange 无法正常工作。对于这种情况有什么解决方案吗？当我提交表单时，现在就发生了没有任何价值的情况。

表格提交结果：

pickup_region: ""

其他功能：

const HandleGetProvince = (id) => {

    PickupAddress[0]['pickup_region'] = id
    dispatch(ProvinceList(id));
}

福米克：

<Formik
        initialValues={{
            pickup_region: '',
        }}
        onSubmit={(values) => ProcessBookingBtn(values)}
    >
        {({ handleChange, handleBlur, handleSubmit, values, errors, touched }) => (

            <View style={{ backgroundColor: 'white', borderColor: 'white', borderRadius: 20 }}>
                <VStack space={1} p={5}>
                    <View>
                        
                        

                        <View style={{ flexDirection: 'row', flex: 1, flexWrap: 'wrap', alignItems: 'flex-start' }}>
                            <View style={{ width: '50%', padding: 3 }}>
                                <Text style={{ fontSize: 12, marginTop: 10 }}>Region</Text>
                                <Select
                                    accessibilityLabel="Region"
                                    placeholder="Region"
                                    placeholderTextColor="#000"
                                    color="#000"
                                    mt={1}
                                    name="pickup_region"
                                    onValueChange={(itemValue) => {[handleChange('pickup_region'), HandleGetProvince(itemValue)] }}
                                >
                                    {
                                        regions && regions.data ? (
                                            regions.data?.map((data, i) => {
                                                return (

                                                    <Select.Item key={i} label={data.name} value={data.id.toString()} />

                                                )
                                            })
                                        ) : <Select.Item label="No Region Available" value="" />
                                    }
                                </Select>
                            </View>

                        <View style={{ padding: 40 }}>
                            <TouchableOpacity onPress={handleSubmit}>
                                <Button type="submit" style={{ borderColor: '#FA0A0A', backgroundColor: '#FA0A0A' }}>
                                    <Text style={{ color: 'white', fontWeight: 'bold' }}>Save</Text>
                                </Button>
                            </TouchableOpacity>
                        </View>
                    </View>

                </VStack>

            </View>

        )}

    </Formik>

Answer 1

ProponValueChange接受一个函数，该函数接收value.

onValueChange={(itemValue) => {
  // your definition
}}

为了调用两个具有更改值的函数，您必须使用setFieldValue. 将您的功能更改为：

onValueChange={(itemValue) => {
  setFieldValue("pickup_region", itemValue);
  HandleGetProvince(itemValue);
}

您可以setFieldValue从Formik组件的 props 中获取：

{({ handleChange, handleBlur, handleSubmit, values, errors, touched, setFieldValue }) => (...)

另一件事：用大写命名你的函数没有任何问题，但在大多数代码库中你会遇到驼峰命名法。您可以在此处阅读有关约定的更多信息。