使用对象数据类型反应 useState

Posted 2023-02-18

【中文标题】使用对象数据类型反应 useState

【英文标题】：React useState using object data type

【发布时间】：2022-01-05 03:55:07

【问题描述】：

所以我是 React 新手，目前正在处理表单。首先这是我写的全部代码：

 const [optionGender, setOptionGender] = useState(value: '', label: '');
 const options = [
     value: 'male', label:'male',
     value: 'female', label: 'female'
 ]

 return (
     <>
         <h3>Personal Information</h3>

         <Formik initialValues = 
             firstName: '',
             lastName: '',
             email: '',
             gender: optionGender,
             age: '',
         
             onSubmit = value => 
                 console.log(value);
                 // when the form is posted
             
             validationSchema = Yup.object(
                 firstName: Yup.string().required("This field is required")
             )
         >
             <Form>
                 <div className= "mb-3">
                     <label htmlFor = "firstName">First Name</label>
                     <Field name = "firstName" id = "firstName" placeholder = "First Name" className="form-control"/>
                     <ErrorMessage name = "firstName">msg => <div className = "text-danger"> msg</div></ErrorMessage>
                     <label htmlFor="lastName">Last Name</label>
                     <Field name = "lastName" id = "lastName" placeholder = "Last Name" className="form-control"/>
                     <label htmlFor="gender">Gender</label>
                     <Select name = "gender" id = "gender" placeholder = "Select ..." options = options onChange = (e) => 
                         setOptionGender(
                             value: e?.value
                             label: e?.label
                         )
                     />
                     <label htmlFor="email">Email</label>
                     <Field name = "email" id = "email" placeholder = "Email Address"className="form-control"/>
                     <label htmlFor="age">Age</label>
                     <Field name = "age" id = "age" placeholder = "Age" className="form-control"/>
                 </div>

                 <Button type = "submit"> Save Changes</Button>
                 <Link className = "btn btn-secondary" to = "/">Cancel</Link>
             </Form>
         </Formik>        
     </>
 )

基本上我正在尝试更改作为 value: sting, label:string 对象的选项值，并将新值传递给表单的性别变量。但是我有以下错误：

键入'字符串 | undefined' 不能分配给类型 'string'。 类型“未定义”不可分配给类型“字符串”.ts(2322)

问题出在代码中

                             value: e?.value
                             label: e?.label

有什么解决办法吗？ 谢谢

【问题讨论】：

试试value: e?.value || ''

【参考方案1】：

为什么还要保存标签？

无论如何，为了调试，您可以记录您的事件以查看其结构：

onChange=(e) => 
  console.log(e);
  ...

由于我们不知道您使用什么 UI 框架来呈现组件（因此查看它们作为事件触发的内容），所以我只能给您我认为可行的内容：

onChange=(e) => setOptionGender(
  value: e.target.value,
  label: e.target.value
)