Ant Design Form 组件不显示输入值

Question

I have a multi-step form (wizard) consisting of several components, which all store the input data in a Redux reducer. To create the form itself, I use an antd Form component. The issue is that if there's an already existing value (for example, the user typed it in, switched away from this step and switched back), it doesn't get displayed in the Input component: the component still shows the placeholder text. What am I doing wrong?

Source code:

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>

This is not a problem with Redux itself: when console.logging or outputting the name property, it stores the input value the way it should.

Answer 1

when you are returning to your previous screen your form is being re-rendered . you have to load the values of form from 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})}
/>