Komponen Formulir Desain Semut tidak menampilkan nilai input

Saya memiliki formulir multi-langkah (wizard) yang terdiri dari beberapa komponen, yang semuanya menyimpan data input dalam peredam Redux. Untuk membuat formnya sendiri, saya menggunakan komponen antd Form. Masalahnya adalah jika ada nilai yang sudah ada (misalnya, pengguna mengetiknya, beralih dari langkah ini dan beralih kembali), nilai tersebut tidak ditampilkan di komponen Input: komponen masih menampilkan teks placeholder. Apa yang saya lakukan salah?

Kode sumber:

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>

Ini bukan masalah dengan Redux itu sendiri: ketika console.logging atau mengeluarkan properti name, ia menyimpan nilai input sebagaimana mestinya.


reactjs react-redux antd
person Anna    schedule 20.10.2020    source sumber

Jawaban (1)


arrow_upward
0
arrow_downward

ketika Anda kembali ke layar sebelumnya, formulir Anda sedang dirender ulang. Anda harus memuat nilai form dari 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
Saya sudah memuat nilai formulir dari Redux, seperti const name = useSelector(state => state.wizard.name) Apakah Anda menyarankan agar saya membuat serangkaian tindakan tambahan untuk dikirim guna mendapatkan kembali nilai dari Redux? - person Anna; 27.10.2020