为什么'react-hook-form'给出空数据？

Question

我正在使用 react-native 并使用“react-hook-forms”来创建动态表单， 但它返回空数据对象，但它应该返回在输入字段中键入的值。 onSubmit 函数给出一个空值。请检查我的以下代码。请帮帮我...

//输入框.js.这是我想要在 AddDirectries.js 中访问其值的动态元素

import { useForm, Controller } from 'react-hook-form'
const InputBox = ({ fields, fieldName }) => {
    let { control } = useForm();
    return (
        <>
            { fields.field_unit == null ? <Text style={styles.formsTitle}>{fieldName}</Text> :
                <Text style={styles.formsTitle}> {fieldName + "(" + fields.field_unit + ")"}</Text>

            }

            {[...Array(fields.field_count)].map((item, index) => {
                return (

                    <Controller
                        control={control}
                        name={'j' + index}
                        defaultValue=""
                        render={({ field: { onChange, onBlur, value } }) => (
                            <TextInput
                                onChangeText={value => onChange(value)}
                                value={value}
                            ></TextInput>

                        )}
                    />
                )
            })
            })
        </>)
}
export default InputBox;

//AddDirectries.js 这里我想访问 TextInput 值。

import { useForm } from 'react-hook-form'
import Element from '../components/Element'
import FormJson from '../../From.json'
export const AddDirectories = (props) => {
    let { handleSubmit, control, formState: { errors } } = useForm();
    const [elements, setElements] = useState([]);
    const [keys, setKeys] = useState([]);
    const onSubmit = data => console.log(data);
    useEffect(() => {
        setKeys(Object.keys(FormJson))
        setElements(FormJson)
    }, [])
    return (
        <View style={[styles.mainScreen, { backgroundColor: 'transparent' }]}>
                {
                    keys.map((fieldName, index) => {
                        return <Element fieldName={fieldName} fields={elements[keys[index]]} key={index}></Element>
                    })
                }
                <TouchableOpacity onPress={handleSubmit(onSubmit)} style={[styles1.addButton, { marginBottom: 30 }]}>
                    <Text>ADD</Text>
                </TouchableOpacity>
        </View>
    )
}

//Element.js

const Element = ({fieldName, fields }) => {
    switch (fields.field_type) {
        case ("TextField"):
                return (<InputLocation fields ={fields} fieldName={fieldName} />)
        default: return null;
    }
}
export default Element;

Answer 1

我也遇到了同样的问题。 而不是：

<Controller
                        control={control}
                        name={'j' + index}
                        defaultValue=""
                        render={({ field: { onChange, onBlur, value } }) => (
                            <TextInput
                                onChangeText={value => onChange(value)}
                                value={value}
                            ></TextInput>

                        )}
                    />

将字段扩展到文本输入：

<Controller
                        control={control}
                        name={'j' + index}
                        defaultValue=""
                        render={({ field }) => (
                            <TextInput
                                {...field}
                                onChangeText={value => field.onChange(value)}
                                value={field.value}
                            ></TextInput>

                        )}
                    />