反應表單不會將輸入捕獲到 formik fieldarray

Question

我在formik中發送了涉及字段數組的代碼，問題如下：一方面，添加和刪除字段的按鈕可以正常工作，另一方面，它們可以工作的文本框，因為您可以在其中輸入數據，但是提交表單時，不會發送在 fieldarray 中包含的文本框中輸入的數據，謝謝。

表單的初始值

  const formik = useFormik({
        initialValues: {
            no_doc: '',
            apellido: '',
            nombre: '',
            fec_nac: '',
            sexo: '',
            domicilio: '',
            no_tel: '',
            email: '',
            obra_soc: '',
            no_obra_soc: '',
            plan_obra_soc: '',
            fec_prot: Date.now.toString(),
            medico: '',
            diagnostico: '',
            medicacion: '',
            practicas_solicitadas: '',
            practica_s: [
                {
                cod_ana: '',
                autorizada: '',
                obra_soc:''
            }]
        },
       
        onSubmit: (data) => {
           // setFormData(data);
            setShowMessage(true);
            console.log(data);
            formik.resetForm();
        }

    });

Formik FieldArray 代碼

 <FormikProvider value={formik}>
    <FieldArray name='practica_s'>
       {({push, remove, Formik }) => (
          <React.Fragment>
              {formik.values.practica_s.map(( practica_s , index) => (
                   <Grid container item>
                       <Grid item>
                            <Field name={`practica_s[${index}].cod_ana`}
                                   id="practica_s.cod_ana"
                                   component= {Autocomplete}
                                   sx={{ width: 300 }}
                                   autoHighlight    
                                   value= {practicas.cod_ana}
                                   options={practicas}        
                                   getOptionLabel={(option) => option.nom_ana}
                                   renderInput={(params) => <TextField {...params} label="Practica" />}/>
                        </Grid>
                             <Grid item>
                                 <Field name={`practica_s[${index}].autorizada`} 
                                 id="autorizada"
                                 component= {TextField}
                                 label= "Autorizada ?" />
                             </Grid>
                            <Grid item>
                                <Field name={`practica_s[${index}].obra_soc`} 
                                       id="obra_soc"
                                       component= {TextField}
                                       label= "Obra Social" />
                         </Grid>
                             <Grid item>
                                <Button  onClick={() => remove(index)}>Delete</Button>
                             </Grid>
                         </Grid>
             ))}
                            <Grid item>
                                <Button type='button' onClick={() => push({cod_ana:'', autorizacion:'', obra_soc:''})}>Add</Button>
                            </Grid>
        </React.Fragment>
    )}
  </FieldArray>
</FormikProvider>

Answer 1

最后，感謝@Thremulant 的幫助，我能夠重新制定“Fieldarray 代碼”，以便一切正常。 基本上，在現場，“組件”選項已更改為“作為”選項。 另一方面，我重寫了“自動完成”字段的代碼，以便在更改選擇時，可以將與 select 顯示的值不同的值傳遞給 FieldArray 的“字段”，我等待評論並提前致謝提供的幫助

<FormikProvider value={formik}>
  <FieldArray name='practica_s'>
    {({push, remove, Formik }) => (
      <React.Fragment>
        {formik.values.practica_s.map(( practica_s , index) => (
        <>
          <div className="p-col-12 p-md-3">
            <Autocomplete
              id="practicas"
              name="practicas"
              options={practicas}
              getOptionLabel={option => option.nom_ana}
              onChange={(e, value) => {
                formik.setFieldValue(`practica_s[${index}].cod_ana` , value.cod_ana)
                }}
              renderInput={params => (<TextField {...params}
                              name={`practica_s[${index}].autorizada`}  
                              label="Prtacticas"
                              variant="outlined"
                               />
              )}
              />
              </div>
              <div className="p-col-12 p-md-3">
                <div className="p-inputgroup">
                    <Field name={`practica_s[${index}].autorizada`} 
                       id="autorizada"
                       as= {InputText}
                       label= "Autorizada ?" />
                 </div>
               </div>
               <div className="p-col-12 p-md-3">
                 <div className="p-inputgroup">
                     <Field name={`practica_s[${index}].obra_soc`} 
                         id="obra_soc"
                         as= {InputText}
                         label= "Obra Social" />
                  </div>
                </div>
                <div className="p-col-12 p-md-3">
                    <Button  onClick={() => remove(index)}>Delete</Button>
                 </div>
      </>
     ))}
        <div className="p-col-12 ">
          <Button type='button' onClick={() => push({cod_ana:'', autorizada:'', obra_soc:''})}>Add</Button>
         </div>
   </React.Fragment>
   )}
 </FieldArray>
</FormikProvider>