使用对象数据类型反应 useState答案

【问题标题】：React useState using object data type使用对象数据类型反应 useState
【发布时间】：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 || ''

标签： reactjs react-native react-hooks use-state react-forms

【解决方案1】：

为什么还要保存标签？

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

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

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

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

【讨论】：