Установка значения по умолчанию в поле ввода в библиотеке antd после вызова функции в useEffect

Question

У меня есть функция loadProfile, которую я хочу вызвать в useEffect. Если функция loadProfile вызывается в пределах useEffect, имя Mario должно отображаться внутри поля ввода name. Как я могу установить значение по умолчанию в библиотеке antd внутри ввода? Я пытаюсь использовать defaultValue, но поле ввода остается пустым.

Пример здесь: https://stackblitz.com/edit/react-311hn1

const App = () => {

    const [values, setValues] = useState({
        role: '',
        name: '',
        email: '',
        password: '',
        buttonText: 'Submit'
    });

    useEffect(() => {
        loadProfile();
    }, []);

    const loadProfile = () => { 
        setValues({...values, role, name="Mario", email});
    }

    const {role, name, email, buttonText} = values;



    const updateForm = () => (
        <Form
            {...layout}
            name="basic"
            initialValues={{
                remember: true,
                name: name
            }}
        >
            <Form.Item
                label= 'Name'
                name='name'
                rules={[
                    {
                        required: true,
                        message: 'Please input your name!',
                    },
                ]}
            >
                <Input 
                    defaultValue= {name}
                />
            </Form.Item>

            <Form.Item
                label="Email"
                name="email"
                value={email}
                rules={[
                    {
                        type: 'email',
                        required: true,
                        message: 'Please input your email!',
                    },
                ]}
            >
                <Input 
                />
            </Form.Item>

            <Form.Item {...tailLayout}>
                <Button type="primary" htmlType="submit">
                    {buttonText}
                </Button>
            </Form.Item>
        </Form>
    );

    return (
        <>
            <Row>
                <Col span={24} style={{textAlign: 'center'}}>
                  <h1>Private</h1>
                  <p>Update Form</p>
                </Col>
            </Row>
                {updateForm()}
        </>
    );
};

Answer 1

Вы должны внести три изменения в свой код. Это рабочий компонент, я также извлек ваш компонент и поместил туда соответствующее состояние. Я также сделал его функциональным.

https://stackblitz.com/edit/react-tlm1qg

Первое изменение

setValues({...values, role, name="Mario", email});

на

setValues({...values, name: "Mario"});

Это правильно установит состояние.

Второе изменение:

Затем вы должны заметить, что если вы установите defaultValue="test123", оно все равно не будет работать , что-то не так. Уберите name из Form.Item и бум работает. Появляется test123. Но если вы поместите туда values.name, это все равно не сработает!

Третье изменение:

Это потому, что defaultValue устанавливает это значение только при создании компонента, а не на крепление. Таким образом, вы должны использовать value={values.name}, и он установит это значение один раз при монтировании для вашего useEffect

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

Если вы посмотрите на FAQ для Ant Design, там написано:

Компоненты внутри Form.Item со свойством name перейдут в управляемый режим, из-за чего defaultValue больше не будет работать . Пожалуйста, попробуйте initialValues ​​of Form, чтобы установить значение по умолчанию.

Ant Design берет на себя управление - поэтому вам не нужно устанавливать value={name} и onChange.

Вы хотите для установки значений ПОСЛЕ создания компонента. Для этого вам понадобится

  const [form] = Form.useForm();
  
  React.useEffect(() => {
    form.setFieldsValue({
      username: 'Mario',
    });
  }, []);

и в вашей форме убедитесь, что вы добавили:

    <Form
        {...layout}
        name="basic"
        initialValues={{
            remember: true,
        }}
        form={form} // Add this!
    >

Я обновил свой онлайн-пример.

Общая картина - когда вы хотите установить значение после создания, используйте этот хук и form.setFieldsValue