Javascript 为什么我'；我在React.js中使用useEffect钩子时收到这些警告？

js和hooks，我一直收到这些警告，我只是不明白为什么，我确实阅读了React文档，但仍然不明白

/src/CustomerList.js 第32:6行：React Hook useEffect缺少依赖项：“loadData”。包括它或删除 依赖项数组/详尽的deps

/src/CustomerForm.js 第44:9行：React Hook useEffect缺少依赖项：“setValue”。包括它或删除 依赖项数组/详尽的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>
    );
}

constcustomerform=（{customer，saveSuccess}）=>{
常量{register，handleSubmit，errors，setValue，reset}=useForm（）；
const onSubmit=（数据，e）=>{
e、 预防默认值（）；
如果（客户）{
data.id=customer.id；
axios.put（基本URL{
id:data.id，
firstName:data.firstName，
lastName:data.lastName，
phoneNumber:data.phoneNumber，
电子邮件：data.email
})。然后（响应=>{
警觉（“现实存在。”）
})
}否则{
axios.post（基本URL{
firstName:data.firstName，
lastName:data.lastName，
phoneNumber:data.phoneNumber，
电子邮件：data.email
})。然后（响应=>{
警报（“Se guardóexitosamente.”
})
}
saveSuccess（）；
};
useffect（（）=>{
如果（客户）{
setValue（“firstName”，customer.firstName）；
setValue（“lastName”，customer.lastName）；
设置值（“电话号码”，customer.phoneNumber）；
设置值（“电子邮件”，customer.email）；
}
}，[客户]；
返回(
{errors.firstName&&“firstName是必需的”}
{errors.lastName&&“lastName是必需的”}
{errors.phoneNumber&&“需要电话号码”}
{errors.email&&“email是必需的”}
{reset（{}}}
>
重置
拯救
);
}

您是否能够链接到工作示例？这可能有助于调试，但只要仔细阅读代码，如果您在

useffect

调用中添加这些依赖项，这些警告似乎就应该得到解决。例如：

/* 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]);

---

还有一个警告说它在

CustomerList.js

中，但是示例代码中没有提到该组件，您可以链接它吗？