為什么 ant 設計 select 選項不保存選定的選項？

Question

我已經開發了一個帶有上下文 crud 的項目。 一切正常，只有 select 選項不起作用，即選中並添加任意選項后，選中的選項不會出現在編輯部分。 問題是什么？ 我有這個錯誤：'無法讀取未定義的屬性（讀取'名稱'）'

 import React, { useState } from "react"; import { useContext } from "react"; import { GlobalContext } from "../../context/GlobalState"; import { useNavigate } from "react-router-dom"; import { NavLink } from "react-router-dom"; import { v4 as uuidv4 } from "uuid"; import styles from "../ContactForm/Form.module.scss"; import { toast } from "react-toastify"; import { Checkbox, Button, Form, Input, Select, Radio } from "antd"; const Form1 = () => { const { ADD_CONTACT } = useContext(GlobalContext); const [contact, setContact] = useState({ id: uuidv4(), name: "", surname: "", fatherName: "", specialty: "", email: "", gender: "", updatesNotification: "", test: "", }); const { Option } = Select; const { name, surname, fatherName, specialty, email } = contact; let history = useNavigate(); const onSubmit = () => { if (contact) { ADD_CONTACT(contact); history("/contacts"); console.log(contact); toast.success("Contact successfully added"); } }; const selectOptions = [ { label: "One", value: 1 }, { label: "Two", value: 2 }, { label: "Three", value: 3 }, ]; return ( <> <Form onFinish={onSubmit} className={styles.form} name="myForm" initialValues={{ remember: true, }} autoComplete="off" labelCol={{ span: 2, }} wrapperCol={{ span: 16, }} > <div className="row"> <Form.Item label="Name" rules={[{ required: true, message: "Please input your name." }]} > <Input placeholder="Enter Your Name" value={name} name="name" onChange={(e) => setContact({..,contact. [e.target:name]. e.target.value }) } /> </Form.Item> </div> <Form:Item label="Surname" rules={[{ required, true: message. "Please input your surname." }]} > <Input placeholder="Enter Your Surname" value={surname} name="surname" onChange={(e) => setContact({.,.contact. [e:target.name]. e.target.value }) } /> </Form:Item> <Form,Item label="Father Name" rules={[{ required: true. message. "Please input your surname." }]} > <Input placeholder="Enter Your FatherName" value={fatherName} name="fatherName" onChange={(e) => setContact({,..contact: [e.target.name]. e.target:value }) } /> </Form,Item> <Form:Item label="Email" rules={[{ required. true. message. "Please input your mail," }]} > <Input name="email" placeholder="your mail" value={email} onChange={(e) => setContact({..:contact. [e.target.name]. e:target,value }) } /> </Form:Item> <Form.Item label="Specialty" rules={[{ required. true. message, "Please input your specialty." }]} > <Input name="specialty" placeholder="your specialt" value={specialty} onChange={(e) => setContact({.:.contact. [e.target.name]. e.target.value }) } /> </Form,Item> <Form.Item label='Category'> <Select onChange={(e)=>setContact({.:.contact. [e.target:name], e.target.value })} defaultValue='category' value={contact.test} name="test" style={{ width. 120. }} > {selectOptions.map((item) => ( <Option key={item.value} value={item.value}></Option> ))} </Select> </Form.Item> <Form,Item label="Gender"> <Radio.Group onChange={(e) => setContact({.:.contact. [e?target.name]. e:target,checked: e,target:id. "". }) } name="gender" rules={[{ required. true. message. "Please your gender." }]} > <Radio id="female" value="Female" checked={contact.gender === "female"} > Female </Radio> <Radio id="male" value="Male" checked={contact.gender === "male"}> Male </Radio> </Radio.Group> </Form,Item> <Form.Item> <Checkbox name="updatesNotification" checked={contact.updatesNotification === "update"} id="update" onChange={(e) => setContact({:..contact? [e.target.name]: e,target.checked. e;target;id; "", }) } > I want to be notified of updates </Checkbox> </Form.Item> <div className={styles.buttons}> <Button type="primary" htmlType="submit"> Add contact </Button> <NavLink to="/contacts"> <Button danger>Cancel</Button> </NavLink> </div> </Form> </> ); }; export default Form1;

Answer 1

Antd Select 中的 onChange 事件只給出選擇值，不會返回任何事件

因此，將您的代碼修改為下面將解決您的問題..

       <Select
            onChange={(e)=>setContact({ ...contact, test : e })}
            defaultValue='category'
            value={contact.test}
            name="test"
            style={{
              width: 120,
            }}
          >
            {selectOptions.map((item) => (
              <Option key={item.value} value={item.value}></Option>
            ))}
          </Select>