Ant设计表单组件不显示输入值

Question

我有一个由几个组件组成的多步骤表单(向导(，这些组件都将输入数据存储在Redux reducer中。为了创建表单本身，我使用了一个antdForm组件。问题是，如果有一个已经存在的值(例如，用户输入了它，从这个步骤切换回来(，它不会显示在输入组件中：该组件仍然显示占位符文本。我做错了什么？

源代码：

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.log或输出name属性时，它会以应有的方式存储输入值。

Answer 1

当您返回到上一个屏幕时，您的表单将被重新呈现。您必须从redux加载form的值。

<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})}
/>