React MUI: Isu pemilihan nilai dan nilai lalai tiada

Question

Saya sedang mencipta borang dalam bertindak balas menggunakan mui dan formik. Semasa menggunakan pilih saya menetapkan nilai lalai menggunakan objek dari api tetapi pilih tidak berfungsi dengan betul. Saya tidak boleh memilih nilai dan nilai lalai tidak dipilih secara lalai. Ini kodnya:

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;

Selain itu, saya rasa ada sedikit masalah dengan gaya yang dipilih.

Answer 1

Jadi saya mendapat ralat. Saya menggunakan MenuItem untuk bar sisi React Pro

Saya harus menggunakan MenuItem daripada pakej mui