Компонент Ant Design Form не отображает входное значение

У меня есть многоэтапная форма (мастер), состоящая из нескольких компонентов, которые хранят входные данные в редукторе Redux. Для создания самой формы я использую компонент Antd Form. Проблема в том, что если есть уже существующее значение (например, пользователь ввел его, переключился с этого шага и переключился обратно), оно не отображается в компоненте ввода: компонент по-прежнему показывает текст заполнителя. Что я делаю неправильно?

Исходный код:

const dispatch = useDispatch();

const layout = {
        labelCol: { span: 4 },
        wrapperCol: { span: 18 },
    };
const [form] = Form.useForm();

<Form {...layout} form={form}>
                    <Form.Item
                            label="Name"
                            name="Name"
                            rules={[{ required: true }]}
                    >
                        <Input
                            placeholder={"Please enter a name"}
                            value={name}
                            addonBefore={name}
                            onChange={(event) => dispatch({type: WIZARD_SET_NAME, name: event.target.value})}
                        />
                    </Form.Item>
</Form>

Это не проблема самого Redux: когда console.logging или выводит свойство name, он сохраняет входное значение так, как должно.


reactjs react-redux antd
person Anna    schedule 20.10.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

<Input
        placeholder={"Please enter a name"}
        value={GET_THE_VALUE_FROM_STORE}.   ///-> see here
        addonBefore={name}
        onChange={(event) => dispatch({type: WIZARD_SET_NAME, name: event.target.value})}
/>
person Mohammad Faisal    schedule 20.10.2020
comment
Я уже загружаю значения формы из Redux, вот так const name = useSelector(state => state.wizard.name) Вы предлагаете мне создать дополнительный набор действий для отправки, чтобы получить значения обратно из Redux? - person Anna; 27.10.2020