js and hooks, I have been getting these warnings and I just don't understand why, I did read React documentation but still I don't get it
./src/CustomerList.js Line 32:6: React Hook useEffect has a missing dependency: 'loadData'. Either include it or remove the dependency array react-hooks/exhaustive-deps
./src/CustomerForm.js Line 44:9: React Hook useEffect has a missing dependency: 'setValue'. Either include it or remove the dependency array react-hooks/exhaustive-deps
I will just paste the hole code side in case the problem is not in the useEffect itself.
const CustomerForm = ({customer, saveSuccess}) => {
const { register, handleSubmit, errors, setValue, reset } = useForm();
const onSubmit = (data, e) => {
e.preventDefault();
if (customer) {
data.id = customer.id;
axios.put(BASE_URL, {
id : data.id,
firstName : data.firstName,
lastName : data.lastName,
phoneNumber:data.phoneNumber,
email : data.email
}).then(response => {
alert("Se actualizó exitosamente.")
})
} else {
axios.post(BASE_URL, {
firstName : data.firstName,
lastName : data.lastName,
phoneNumber:data.phoneNumber,
email : data.email
}).then(response => {
alert("Se guardó exitosamente.")
})
}
saveSuccess();
};
useEffect(() => {
if (customer) {
setValue("firstName", customer.firstName);
setValue("lastName", customer.lastName);
setValue("phoneNumber", customer.phoneNumber);
setValue("email", customer.email);
}
},[customer]);
return (
<form onSubmit={handleSubmit(onSubmit)} noValidate>
<Input
name="firstName"
inputRef={register({ required: true})}
placeholder="First Name"
error={!!errors.firstName}
fullWidth
/>
<p style={{color: "red"}}>{errors.firstName && "First Name is required"}</p>
<Input
name="lastName"
// setValue = {customerForm.lastName}
inputRef={register({ required: true})}
placeholder="Last Name"
error={!!errors.lastName}
fullWidth
/>
<p style={{color: "red"}}>{errors.lastName && "Last Name is required"}</p>
<Input
name="phoneNumber"
// setValue = {customerForm.phoneNumber}
inputRef={register({ required: true})}
placeholder="Phone Number"
error={!!errors.phoneNumber}
fullWidth
/>
<p style={{color: "red"}}>{errors.phoneNumber && "Phone Number is required"}</p>
<Input
name="email"
// setValue = {customerForm.email}
inputRef={register({ required: true})}
placeholder="Email"
error={!!errors.email}
fullWidth
/>
<p style={{color: "red"}}>{errors.email && "Email is required"}</p>
<Button
variant="contained"
color="default"
onClick={() => { reset({}) }}
>
Reset
</Button>
<Button
type="submit"
variant="contained"
color="primary"
>
Save
</Button>
</form>
);
}
Are you able to link to a working example? That might help with debugging, but just by reading over your code it seems those warnings should resolve if you add those dependencies in your useEffect
call. eg:
/* CustomerForm */
useEffect(() => {
if (customer) {
setValue("firstName", customer.firstName);
setValue("lastName", customer.lastName);
setValue("phoneNumber", customer.phoneNumber);
setValue("email", customer.email);
}
},[customer, loadData, setValue]);
You could add the missing dependency such as
useEffect(() => {
if (customer) {
setValue("firstName", customer.firstName);
setValue("lastName", customer.lastName);
setValue("phoneNumber", customer.phoneNumber);
setValue("email", customer.email);
}
},[customer,setValue,loadData]);
but in some cases adding a method as a dependency causes an infinite re-render so i think the best way to overcome the warning is to disable it by
useEffect(() => {
if (customer) {
setValue("firstName", customer.firstName);
setValue("lastName", customer.lastName);
setValue("phoneNumber", customer.phoneNumber);
setValue("email", customer.email);
}
//eslint-disable-next-line
},[customer]);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.