Question

我在 defaultValue 中使用 urlParams 在表单中传递数据，即不受控制的组件之后，无论我获取数据我想发送到 axios 发布请求和用户点击提交按钮数据库中的所有数据存储我使用钩子但是当我提交按钮时我得到了空数据。当我发送到下面的发布请求时，我很难将数据更新到 setState 我还附加了代码和框链接和代码。 https://codesandbox.io/live/fwesdvq

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

import axios from "axios";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  useLocation,
} from "react-router-dom";
export default function Form(props) {
  const [sale, setSale] = useState("");
  const [district, setDistrict] = useState("21");
  const [billing, setBilling] = useState("");
  const [customer, setCustomer] = useState("");
  const [custgroup, setCustgroup] = useState("");
  const [product, setProduct] = useState("");
  

  var bodyFormData = new FormData();
  bodyFormData.append("sale", "12");

  bodyFormData.append("district", district);
  bodyFormData.append("billing", billing);
  bodyFormData.append("customer", customer);
  bodyFormData.append("product", product);
  bodyFormData.append("prodgroup", prodgroup);
 
  axios({
    method: "post",
    url: "http://localhost:8080/form",

    data: { bodyFormData },
    headers: { "Content-Type": "multipart/form-data" },
  })
    .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 handleChange = (event) => {
    setCurrency(event.target.value);
  };
  
  const onSubmit = (data) => console.log("get", JSON.stringify(data));
  //console.log(url);
  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)",
            }}
          >
            <Container component="main" fixed>
              <CssBaseline />
              
                <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)}
                  //onSubmit={handleSubmit}
                >
                  <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>
                    <Grid item xs={12} sm={6}>
                      <TextField
                        variant="outlined"
                        type="text"
                        fullWidth
                        id="district"
                        label="Sales district"
                        name="district"
                        autoComplete="lname"
                        onChange={(event) => {
                          setDistrict(event.target.value);
                        }}
                        defaultValue={urlParams.salesdist}
                      />
                    </Grid>
                    <Grid item xs={12} sm={6}>
                      <TextField
                        variant="outlined"
                        type="number"
                        fullWidth
                        id="sold"
                        label="Quantity sold"
                        name="sold"
                        onChange={(event) => {
                          setQty(event.target.value);
                        }}
                        defaultValue={urlParams.qtysold}
                      />
                    </Grid>
                    <Grid item xs={12} sm={6}>
                      <TextField
                        variant="outlined"
                        fullWidth
                        id="customer-name"
                        label="Customer name"
                        name="customer-name"
                        autoComplete="lname"
                        onChange={(event) => {
                          setCustomer(event.target.value);
                        }}
                        defaultValue={urlParams.custname}
                      />
                    </Grid>

                    <Grid item xs={12} sm={6}>
                      <TextField
                        variant="outlined"
                        type="number"
                        fullWidth
                        id="target"
                        label="Target price"
                        name="target"
                        autoComplete="lname"
                        onChange={(event) => {
                          setTarget(event.target.value);
                        }}
                        defaultValue={urlParams.targetprice}
                      />
                    </Grid>
                    <Grid item xs={12} sm={6}>
                      <TextField
                        variant="outlined"
                        type="text"
                        fullWidth
                        id="name"
                        label="Product name"
                        name="product-name"
                        autoComplete="lname"
                        onChange={(event) => {
                          setProduct(event.target.value);
                        }}
                        defaultValue={urlParams.product}
                      />
                    </Grid>
                   
                    <Grid item xs={12} sm={6}>
                      <TextField
                        fullWidth
                        id="outlined-select-currency"
                        select
                        label={
                          <Typography style={{ fontSize: 20 }}>
                            Action expected
                          </Typography>
                        }
                        value={currency}
                        variant="outlined"
                      >
                        {actions.map((option) => (
                          <MenuItem key={option.value} value={option.value}>
                            {option.label}
                          </MenuItem>
                        ))}
                      </TextField>
                    </Grid>
                    <Grid item xs={12} sm={6}>
                      <TextField
                        variant="outlined"
                        type="number"
                        fullWidth
                        id="lastName"
                        label="Price increment"
                        name="lastName"
                        autoComplete="lname"
                      />
                    </Grid>
                  </Grid>
                  <Button
                    type="submit"
                    fullWidth
                    variant="contained"
                    color="primary"
                    className={classes.submit}
                    onClick={Form}
                  >
                    Submit
                  </Button>
                  <Grid container justify="flex-end">
                    <Grid item></Grid>
                  </Grid>
                </form>
              </div>
            </Container>
          </Card>
        </Grid>
      </Grid>
    </div>
  );
}

当我传递给 axios 发布请求时使用 setState 更新数据

0 个答案: