React MUI: Isu pemilihan nilai dan nilai lalai tiada
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.
