![](/img/trans.png)
[英]Facing issue while updating auto increment counter value in react.js using useEffect Hook
[英]Why I'm getting these warnings while using useEffect hook in React.js?
js 和 hooks,我一直收到這些警告,我只是不明白為什么,我確實閱讀了 React 文檔,但仍然不明白
./src/CustomerList.js 第 32:6 行:React Hook useEffect 缺少依賴項:'loadData'。 包括它或刪除依賴數組 react-hooks/exhaustive-deps
./src/CustomerForm.js Line 44:9:React Hook useEffect 缺少依賴項:'setValue'。 包括它或刪除依賴數組 react-hooks/exhaustive-deps
如果問題不在 useEffect 本身,我將只粘貼孔代碼側。
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>
);
}
你能鏈接到一個工作示例嗎? 這可能有助於調試,但只要通讀您的代碼,如果您在useEffect
調用中添加這些依賴項,這些警告似乎應該會解決。 例如:
/* CustomerForm */
useEffect(() => {
if (customer) {
setValue("firstName", customer.firstName);
setValue("lastName", customer.lastName);
setValue("phoneNumber", customer.phoneNumber);
setValue("email", customer.email);
}
},[customer, loadData, setValue]);
您可以添加缺少的依賴項,例如
useEffect(() => {
if (customer) {
setValue("firstName", customer.firstName);
setValue("lastName", customer.lastName);
setValue("phoneNumber", customer.phoneNumber);
setValue("email", customer.email);
}
},[customer,setValue,loadData]);
但在某些情況下,將方法添加為依賴項會導致無限重新渲染,因此我認為克服警告的最佳方法是通過以下方式禁用它
useEffect(() => {
if (customer) {
setValue("firstName", customer.firstName);
setValue("lastName", customer.lastName);
setValue("phoneNumber", customer.phoneNumber);
setValue("email", customer.email);
}
//eslint-disable-next-line
},[customer]);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.