Блог

Главная - Вопросы по программированию - Как предварительно заполнить форму React Hook с помощью setValue?

Как предварительно заполнить форму React Hook с помощью setValue?

#javascript #reactjs #react-hook-form

#javascript #reactjs #react-hook-form

Вопрос:

Я пробую простую форму, которая имеет функциональность CRUD. Когда я нажимаю кнопку РЕДАКТИРОВАНИЯ, она показывает все объекты, и все в порядке.

Функция editHandler получает все данные от этой кнопки:

 <button
    onClick={() => editHandler(discount)}
    className='btn btn-info btn-sm'
    data-bs-placement='top'
    title='Edit Info'
    >
    <i className='fa fa-edit'></i>
</button>

Когда я утешаю эту функцию, передавая vlaues:

 const editHandler = (e) => {
    console.log(e);
  }

Это и есть цель утешила Эдит Хендлер:

 {
children: (3) ["Mahila", "Amira", "Badru-diin"]
date: "2020-11-22T10:49:32.296Z"
department: {_id: "5f8158396931c1c9cd164b54", name: "Inpatient"}
empId: "YH-A0184"
empName: "Abdulkadir Ahmed Mohamed"
fatherName: "Ahmed Mohamed Muuse"
hasChildren: true
husband: ""
isMale: true
isSingle: false
motherName: "Madina Ahmed Muse"
wives: [" Nuurto Abdi Ali"]
}

Но когда я использую setValue, он показывает только половину моих объектов, если я нажимаю кнопку, я снова показываю снова 70% и, наконец, если я нажимаю на нее, показываю все:

Результат выглядит следующим образом:

  const editHandler = (e) => {
    setValue('empId', e.empId)
    setValue('empName', e.empName)
    setValue('department', e.department._id)
    setValue('fatherName', e.fatherName)
    setValue('motherName', e.motherName)
    setValue('isSingle', e.isSingle)
    setValue('isMale', e.isMale)
    setValue('wives', e.wives)
    setValue('husband', e.husband)
    setValue('hasChildren', e.hasChildren)
    setValue('children', e.children)
    setEdit(true)
    console.log(watch())
  }

Утешенный результат от watch():

 {
department: "5f8158396931c1c9cd164b54"
empId: "YH-A0184"
empName: "Abdulkadir Ahmed Mohamed"
fatherName: "Ahmed Mohamed Muuse"
isMale: true
isSingle: false
motherName: "Madina Ahmed Muse"
}

и есть зависимые значения, такие как isSingle, которые показывают мужу или жене, является ли это ложным.

Что я делаю не так. Я новичок в react-hook-form.

Справка.

Я нашел кое-что, что вызывает проблему, так это то, что зависимые флажки типа show husband if !isSingle и !исМале.

но моя проблема все еще остается в силе, мне нужна эта зависимость от рабочего кода.

Комментарии:

1. Я не совсем понимаю ваш код. Какова ваша функция watch()? Где вы объявили свои «скидки» и «setValue»?

2. Вы знаете, что я импортировал setValue, смотрите с помощью useForm: const { register, handleSubmit, errors, setValue, watch, reset } = useForm() . и скидка поступает из базы данных, используя идентификатор, подобный информации 1 человека.

3. Ну, из того, что вы говорите, похоже, что вы застряли в основах React. Когда вы setValue , это не сразу влияет на value переменную, поскольку она асинхронна. Используйте a useEffect(() => { console.log(value) }, [value]); обратный вызов внутри useEffect будет выполняться только при изменении значения массива зависимостей, так ЧТО НА САМОМ ДЕЛЕ вы знаете, что значение изменилось. Кроме того, это не сработает, потому value что это объект, поскольку объект не изменится, реакция не обнаружит изменений. Посмотрите на useMemo hook . reactjs.org/docs/hooks-reference.html#usememo

4. Проблема не в useEffect . Даже если я watch() только консольный, он пропускает скрытые входные данные, которые ожидают isSingle быть ложными. При первом нажатии кнопки isSingle значение становится false, а при повторном нажатии кнопки скрытые входные данные получают свои значения.