Javascript 如何使用axios formik和react js发布对象数组

Javascript 如何使用axios formik和react js发布对象数组,javascript,reactjs,axios,formik,Javascript,Reactjs,Axios,Formik,您好,我无法使用axios和formik发布对象数组 我使用npm反应选择 这是我的初始数据 const [initialValues, setInitialValues] = useState( { nom: "",drugs: [{}] } ); 这是我的提交方法 const handleOnSubmit = (values, actions) => { console.log('Fo

您好,我无法使用axios和formik发布对象数组 我使用npm反应选择

这是我的初始数据

const [initialValues, setInitialValues] = useState(
        {
            nom: "",drugs: [{}]
        }
    );
这是我的提交方法

const handleOnSubmit = (values, actions) => {
        console.log('Form Data',values);
        alert(JSON.stringify(values, null, 2))
        confirmAlert({

            title: 'Confirmer pour soumettre',
            message: 'êtes-vous sûr de le faire.',
            buttons: [
                {
                    label: 'Oui',
                    onClick: () => {

                          axios.post("/prescribes", {
                              drugs: values.drugs,
                              nom: values.nom
                        }
                        )
                            .then(response => {
                                
                                actions.setSubmitting(false);
                                console.log(response.data);
                                actions.resetForm();
                               
                            })
                            .catch(error => {
                                actions.setSubmitting(false);
                                handleServerResponse(false, error.response.data.error);
                            });

                        alert('Click Oui')
                    }
                },
                {
                    label: 'Non',
                    onClick: () => alert('Click Non')
                }
            ]
        });
    };
这是我的表格

<div className="card-body bg-white">
    <Formik
        initialValues={initialValues}
        onSubmit={handleOnSubmit}
        validationSchema={formSchema}
    >
        {({ isSubmitting,
            values,
            errors,
            touched,
            isValidating,
            isValid }) => (
            <Form id="fs-frm" noValidate>

                
                <Row>
                    <Label htmlFor="drugs">
                        Médicament
                        <Select
                            name="drugs"
                            closeMenuOnSelect={false}
                  options={drug.map(e => ({ label: e.nom , value: e.id }))}
                            isMulti
                            values={values.drugs}
                            onChange={console.log}

                        />
                    </Label>


                        <Label htmlFor="nom">
                            Nom
                            <Input
                                type="text"
                                name="nom"
                                autoCorrect="off"
                                autoComplete="name"
                                placeholder="Nom"
                                valid={touched.nom && !errors.nom}
                                error={touched.nom && errors.nom}
                            />
                        </Label>
                        {errors.nom && touched.nom && (
                            <StyledInlineErrorMessage>
                                {errors.nom}
                            </StyledInlineErrorMessage>
                        )}


                    
                </Row>




                <Card.Footer style={{ "textAlign": "right" }}>
                    <button type="submit" className="btn btn-success"
                        style={{ "width": "120px", "margin": "1px", "padding": "2px" }}
                        disabled={isSubmitting}>
                        <FontAwesomeIcon icon={faSave} /> Enregister
        </button>{' '}
                                    </Card.Footer>
                {serverState && (
                    <p className={!serverState.ok ? "errorMsg" : ""}>
                        {serverState.msg}
                    </p>
                )}
            </Form>
        )}
    </Formik>
</div>

控制台的新结果如何将这些值更改为对象值?

使用
Formik
时,无需维护外部状态来跟踪表单值
Formik
为您完成这项工作。所以你可以安全地移除这个

const [initialValues, setInitialValues] = useState(
        {
            nom: "",drugs: [{}]
        }
    );
您可以直接将初始值传递给
Formik

<Formik
  initialValues={{
    nom: '',
    drugs: [{}],
  }}

使用
Formik
时,无需维护外部状态来跟踪表单值
Formik
为您完成这项工作。所以你可以安全地移除这个

const [initialValues, setInitialValues] = useState(
        {
            nom: "",drugs: [{}]
        }
    );
您可以直接将初始值传递给
Formik

<Formik
  initialValues={{
    nom: '',
    drugs: [{}],
  }}

代码中有很多东西不清楚。如何在Formik组件中使用select。看起来您没有将select的值设置为Formik值。请添加完整的代码。好的,我添加了属性“nom”的其余代码。我没有问题。我对选择倍数有问题。这是我第一次使用它,我对在formik值中添加数据有问题)@Shyam您的代码中有很多东西不清楚。如何在Formik组件中使用select。看起来您没有将select的值设置为Formik值。请添加完整的代码。好的,我添加了属性“nom”的其余代码。我没有问题。我对选择倍数有问题。这是我第一次使用它,我对在formik值中添加数据有问题)@Shyamthank so mutch you帮了我很多忙:),但是当我在我的问题中添加时,你能看看新的更新吗?我在对象数组的值中有问题,所有属性都为空。你能帮我更改值吗?请看我问题@Shyamthank you so mutch you帮了我很多忙:),但是当我在我的问题中添加时,你能看一下新的更新吗?我对object数组的值有问题,所有属性都为null。你能帮我更改值吗?请看我问题@Shyam中的更新