React MUI: Problem bei der Wertauswahl und fehlender Standardwert
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.
