React MUI: Problem bei der Wertauswahl und fehlender Standardwert

Question

Ich erstelle ein Formular in React mit Mui und Formik. Bei der Verwendung von „select“ lege ich den Standardwert mithilfe eines Objekts aus der API fest, aber „select“ funktioniert nicht ordnungsgemäß. Ich kann keinen Wert auswählen und der Standardwert ist nicht standardmäßig ausgewählt. Hier ist der Code:

import { Box, Button, FormControl, InputLabel, Select, TextField } from "@mui/material";
import React, { useEffect, useState } from "react";
import { useLocation, useParams } from "react-router-dom";
import { Formik } from "formik";
import * as yup from "yup";
import useMediaQuery from "@mui/material/useMediaQuery";
import Header from "../../components/Header";
import useAuth from "../../hooks/useAuth";
import axios from "axios";
import { MenuItem } from "react-pro-sidebar";

const EditEmployee = () => {
  const { user_id } = useParams(); // employee id

  const [emp, setEmployee] = useState({});
  const [Companies, setCompanies] = useState([]);
  const [defcompany, setDefcompany] = useState("");
  const [CompanyId, setCompanyId] = useState(null);

  const handleChange = (event) => {
    setDefcompany(event.target.value);
  };

  const { auth } = useAuth();

  //   get companies
  const GetCompanies = () => {
    axios.get(`${process.env.REACT_APP_MAIN_API_URL}/companies/`).then(function (res) {
      try {
        var result = res.data;
        // console.log(result);
        setCompanies(result);
      } catch (error) {
        console.log(error);
      }
    });
  };

  useEffect(() => {
    GetCompanies();
  }, []);

  // get companies

  useEffect(() => {
    try {
      const response = axios
        .get(`${process.env.REACT_APP_MAIN_API_URL}/employees/` + user_id, {
          headers: {
            "Content-Type": "application/json",
            //   Authorization: "Bearer " + auth.accessToken
          },
          // withCredentials: true,
        })
        .then((response) => {
          setEmployee(response.data[0]);
          setCompanyId(emp.company_id);
          console.log(response.data[0]);
        });
    } catch (err) {
      console.log(err);

      if (!err?.response) {
        console.log("No server Response");
      } else if (!err?.response?.status === 400) {
        console.log("Missing username or password");
      } else if (!err?.response?.status === 401) {
        console.log("Unauthorized");
      } else {
        console.log("Login Failed");
      }
    }
  }, []);

  const phoneRegExp = /^((\+[1-9]{1,4}[ -]?)|(\([0-9]{2,3}\)[ -]?)|([0-9]{2,4})[ -]?)*?[0-9]{3,4}[ -]?[0-9]{3,4}$/;

  const userSchema = yup.object().shape({
    first_name: yup.string().required("required"),
    last_name: yup.string().required("required"),
    email: yup.string().email("Invalid email").required("required"),
    contact_no: yup.string().matches(phoneRegExp, "Phone number is not valid").required("required"),
    // address1: yup.string().required("required"),
    // address2: yup.string().required("required"),
  });

  const isNonMobile = useMediaQuery("(min-width:600px)");

  const handleFormSubmit = (values) => {
    console.log("VALUES");
    console.log(values);
  };

  return (
    <Box m="20px">
      <Header title="Editing" subtitle={`${emp.first_name} ${emp.last_name} ( ${emp.employee_id} )`}></Header>

      <Formik enableReinitialize={true} onSubmit={handleFormSubmit} initialValues={emp} validationSchema={userSchema}>
        {({ values, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting }) => (
          <form onSubmit={handleSubmit}>
            <Box
              display="grid"
              gap="30px"
              gridTemplateColumns="repeat(4,minmax(0,1fr))"
              sx={{
                "& >div": { gridColumn: isNonMobile ? undefined : "span 4" },
              }}
            >
              <TextField
                fullWidth
                variant="outlined"
                type="text"
                label="First Name"
                InputLabelProps={{ shrink: true }}
                onBlur={handleBlur}
                onChange={handleChange}
                value={values.first_name}
                name="first_name"
                error={!!touched.first_name && !!errors.first_name}
                helperText={touched.first_name && errors.first_name}
                sx={{ gridColumn: "span 1" }}
                size="small"
              />

              <TextField
                fullWidth
                variant="outlined"
                type="text"
                label="Last Name"
                InputLabelProps={{ shrink: true }}
                onBlur={handleBlur}
                onChange={handleChange}
                value={values.last_name}
                name="last_name"
                error={!!touched.last_name && !!errors.last_name}
                helperText={touched.last_name && errors.last_name}
                sx={{ gridColumn: "span 1" }}
                size="small"
              />

              <TextField
                fullWidth
                variant="outlined"
                type="text"
                label="Email"
                InputLabelProps={{ shrink: true }}
                onBlur={handleBlur}
                onChange={handleChange}
                value={values.email}
                name="email"
                error={!!touched.email && !!errors.email}
                helperText={touched.email && errors.email}
                sx={{ gridColumn: "span 1" }}
                size="small"
              />

              <TextField
                fullWidth
                variant="outlined"
                type="text"
                label="Phone"
                InputLabelProps={{ shrink: true }}
                onBlur={handleBlur}
                onChange={handleChange}
                value={values.contact_no}
                name="contact_no"
                error={!!touched.contact && !!errors.contact}
                helperText={touched.contact && errors.contact}
                sx={{ gridColumn: "span 1" }}
                size="small"
              />

              <TextField
                fullWidth
                variant="outlined"
                type="text"
                label="Username"
                InputLabelProps={{ shrink: true }}
                onBlur={handleBlur}
                onChange={handleChange}
                value={values.username}
                name="username"
                readOnly
                error={!!touched.contact && !!errors.contact}
                helperText={touched.contact && errors.contact}
                sx={{ gridColumn: "span 1" }}
                size="small"
              />

              <FormControl fullWidth>
                <InputLabel id="company_id">Company</InputLabel>
                <Select
                  labelId="company_id"
                  //   InputLabelProps={{ shrink: true }}
                  name="company_id"
                  fullWidth
                  id="demo-simple-select"
                  value={CompanyId || ""}
                  label="Company"
                  onChange={(e) => setCompanyId(e.target.value)}
                  size="small"
                >
                  {Companies.map((company) => (
                    <MenuItem key={company.company_id} value={company.company_id}>
                      {company.name}
                    </MenuItem>
                  ))}
                </Select>
              </FormControl>

              <TextField
                fullWidth
                variant="outlined"
                type="text"
                label="Department"
                InputLabelProps={{ shrink: true }}
                onBlur={handleBlur}
                onChange={handleChange}
                value={emp.department_id}
                name="department_id"
                error={!!touched.contact && !!errors.contact}
                helperText={touched.contact && errors.contact}
                sx={{ gridColumn: "span 1" }}
                size="small"
              />
              <TextField
                fullWidth
                variant="outlined"
                type="text"
                label="Designation"
                InputLabelProps={{ shrink: true }}
                onBlur={handleBlur}
                onChange={handleChange}
                value={emp.designation_id}
                name="designation_id"
                error={!!touched.contact && !!errors.contact}
                helperText={touched.contact && errors.contact}
                sx={{ gridColumn: "span 1" }}
                size="small"
              />

              <TextField
                fullWidth
                variant="outlined"
                type="text"
                label="Address 1"
                InputLabelProps={{ shrink: true }}
                onBlur={handleBlur}
                onChange={handleChange}
                value={values.address1}
                name="address1"
                error={!!touched.address1 && !!errors.address1}
                helperText={touched.address1 && errors.address1}
                sx={{ gridColumn: "span 2" }}
                size="small"
              />

              <TextField
                fullWidth
                variant="outlined"
                type="text"
                label="Address 2"
                InputLabelProps={{ shrink: true }}
                onBlur={handleBlur}
                onChange={handleChange}
                value={values.address2}
                name="address2"
                error={!!touched.address2 && !!errors.address2}
                helperText={touched.address2 && errors.address2}
                sx={{ gridColumn: "span 2" }}
                size="small"
              />
            </Box>
            <Box display="flex" justifyContent="end" mt="20px">
              <Button type="submit" color="secondary" variant="contained">
                Update
              </Button>
            </Box>
          </form>
        )}
      </Formik>
    </Box>
  );
};

export default EditEmployee;

Außerdem denke ich, dass es einige Probleme mit dem gewählten Stil gibt.

Answer 1

所以我得到了错误。我正在使用 React Pro 侧边栏的 MenuItem

我应该使用 mui 包中的 MenuItem