Question

我正在使用 Axios 发布请求来填充所有数据，但在后端它为表单中的每个字段提供了未定义的值我想知道如何在 Axios 中发布 formData 中的所有数据，因为它给出了空数据在 Axios 发布请求中。

我正在使用 FormData 附加 Axios 数据正文中的所有字段我正在附加表单中所需的屏幕截图帖子需求字段。

import React, { useState, useEffect } from "react";


export default function Form(props) {
 
  var bodyFormData = new FormData();
  bodyFormData.append("sale", "");
  bodyFormData.append("district", "");
  bodyFormData.append("billing", "");
  
  axios({
    method: "post",
    url: "http://localhost:8080/form",
    data: bodyFormData,
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
  })
    .then(function (response) {
      //handle success
      console.log(response);
    })
    .catch(function (response) {
      //handle error
      console.log(response);
    });
  const { search } = useLocation();

  const urlParams = Object.fromEntries([...new URLSearchParams(search)]);

  useEffect(() => {
    console.log(urlParams);
  }, [urlParams]);

  const classes = useStyles();

  const [currency, setCurrency] = React.useState("EUR");
  const onSubmit = (data) => console.log("get", JSON.stringify(data));
  
  return (
    <div>
      <Grid
        container
        container
        direction="column"
        alignItems="center"
        justify="center"
      >
        <Grid item xs={12} lg={6}>
          <Card
            className="p-4 mb-4"
            style={{
              height: 765,
              transform: "rotateX(15deg)",
            }}
          >
                <div
                  className="heading"
                  style={{
                    marginTop: -73,
                    fontSize: 38,
                    marginRight: 15,
                    color: "#002699",
                  }}
                >
                  <h5>Action Tracker</h5>
                </div>
                <form
                  className={classes.form}
                  noValidate
                  onSubmit={(e) => onSubmit(e)}
                >
                  <Grid container spacing={4}>
                    <Grid item xs={12} sm={6}>
                      <TextField
                        type="text"
                        variant="outlined"
                        fullWidth
                        id="sales"
                        label="Sales office"
                        name="sale"
                        autoComplete="lname"
                        onChange={(event) => {
                          setSale(event.target.value);
                        }}
                        defaultValue={urlParams.salesoff}
                      />
                    </Grid>
                    <Grid item xs={12} sm={6}>
                      <TextField
                        type="text"
                        variant="outlined"
                        fullWidth
                        id="billing"
                        label="Billing document"
                        name="billing"
                        autoComplete="lname"
                        onChange={(event) => {
                          setBilling(event.target.value);
                        }}
                        defaultValue={urlParams.billingdoc}
                      />
                    </Grid>
                    
                    
                  <Button
                    type="submit"
                    fullWidth
                    variant="contained"
                    color="primary"
                    className={classes.submit}
                    // onClick={addForm}
                  >
                    Submit
                  </Button>
                  <Grid container justify="flex-end">
                    <Grid item></Grid>
                  </Grid>
                </form>
              </div>
            </Container>
          </Card>
        </Grid>
      </Grid>
    </div>
  );
}

Answer 1

您能否在发出发布请求之前执行 console.log(bodyFormData) 并查看发布的内容？

对我来说，如果您从 axios 获得成功响应，那似乎是错误所在。

Answer 2

为什么不在你提交表单的函数中做这些操作？

你试过这样做吗？

const onSubmit = async () => {
   var bodyFormData = new FormData();
   bodyFormData.append("sale", "");
   bodyFormData.append("district", "");
   bodyFormData.append("billing", "");
      
     await axios({
        method: "post",
        url: "http://localhost:8080/form",
        data: bodyFormData,
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
      })
        .then(function (response) {
          //handle success
          console.log(response);
        })
        .catch(function (response) {
          //handle error
          console.log(response);
        });
    }

事实上，如果你愿意，直接提交表单时更新表单数据，而不是更改。

axios 发布请求以在 reactjs 中发送表单数据

2 个答案: