ส่วนประกอบแบบฟอร์มการออกแบบมดไม่แสดงค่าอินพุต

ฉันมีแบบฟอร์มหลายขั้นตอน (ตัวช่วยสร้าง) ที่ประกอบด้วยส่วนประกอบหลายอย่าง ซึ่งทั้งหมดเก็บข้อมูลอินพุตไว้ในตัวลด 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