И как получить все значения нескольких полей с помощью одного хука useWatch?

Здравствуйте, я использую antd v5. Я хочу получить все значения нескольких полей с помощью одного хука useWatch.

Например, мне нужно преобразовать этот код:

import {Form, Input} from 'antd';

    const Test = () => {
        const firstName = Form.useWatch('fist_name');
    
        const lastName = Form.useWatch('last_name');
    
        return (
            <Form>
                <Form.Item name = "fist_name">
                    <Input />
                </Form.Item>
    
                <Form.Item name = "last_name">
                    <Input />
                </Form.Item>
            </Form>
        );
    };

к этому коду (объект firstAndLastNames содержит значения всех полей 'fist_name' и 'last_name'):

import {Form, Input} from 'antd';

const Test = () => {
    const firstAndLastNames = Form.useWatch(['fist_name', 'last_name']);

    return (
        <Form>
            <Form.Item name = "fist_name">
                <Input />
            </Form.Item>

            <Form.Item name = "last_name">
                <Input />
            </Form.Item>
        </Form>
    );
};

но я не понимаю, как это сделать, пожалуйста, помогите

Вы можете смотреть только одно поле с крючком useWatch. Для нескольких значений вы должны использовать несколько хуков useWatch и передавать каждому пути имени поля к этому хуку. Если вас смущает термин NamePath, пожалуйста, следуйте разделу формы в antd docs.

Muhammad Nouman Rafique 18.01.2023 14:39

Чего вы пытаетесь достичь с помощью useWatch? Если нужно отслеживать изменения во всех полях, лучше использовать onValuesChange.

Scratch'N'Purr 18.01.2023 21:21

@Scratch'N'Purr Я хочу использовать только хук useWatch, и я нашел решение, ему нужно передать пустой массив в зависимости

Dmitriy 03.02.2023 07:41
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
3
110
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Мое решение этой проблемы - передать пустой массив в зависимости useWatch([], form)

Другие вопросы по теме