我如何使用 axios formik post 对象数组并对 js 做出反应

Question

你好，我在 post 使用 axios 和 formik 的对象数组时遇到问题我使用 npm react-select

这是我的初始数据

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>

我的表格就像这张图片中的输入

这是 post 在服务器

之前控制台的结果

我的问题为什么对象数组是空的？

更新：新服务器结果

"drugs": [
            {
                "id": null,
                "nom": null,
                "brand": null,
                "indication": null,
                "contraindication": null
            },
            {
                "id": null,
                "nom": null,
                "brand": null,
                "indication": null,
                "contraindication": null
            }
        ]

控制台的新结果如何将那里的值更改为对象值？

Answer 1

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

const [initialValues, setInitialValues] = useState(
        {
            nom: "",drugs: [{}]
        }
    );

您可以直接将初始值传递给 Formik .

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

当您select在 select 中选择一个选项或在您的输入中输入内容时，您并没有更新 Formik values。您可以使用 setFieldValue 属性来设置该值。您需要对 Select 和 Input

的 onChange 道具进行以下更改

<Formik
  initialValues={{
    nom: '',
    drugs: [{}],
  }}
  onSubmit={handleOnSubmit}
  validationSchema={formSchema}
>
  {({isSubmitting, values, errors, touched, setFieldValue}) => (
    <Form id="fs-frm" noValidate>
      .....
      <Select
        name="drugs"
        closeMenuOnSelect={false}
        options={drug.map((e) => ({label: e.nom, value: e.id}))}
        isMulti
        values={values.drugs}
        onChange={(
          selectedValue /* check this value before passing to the setFieldValue */
        ) => setFieldValue('drugs', selectedValue)}
      />
      .....
      <Input
        type="text"
        name="nom"
        autoCorrect="off"
        autoComplete="name"
        placeholder="Nom"
        onChange={(
          yourValue /* check this value before passing to the setFieldValue */
        ) => setFieldValue('nom', yourValue)}
        valid={touched.nom && !errors.nom}
        error={touched.nom && errors.nom}
      />
    </Form>
  )}
</Formik>;

我如何使用 axios formik post 对象数组并对 js 做出反应

How can i post array of object using axios formik and react js

javascript

reactjs

axios

formik