如何修复 React Hook useEffect 缺少依赖项
Posted
技术标签:
【中文标题】如何修复 React Hook useEffect 缺少依赖项【英文标题】：How to fix React Hook useEffect has a missing dependency 【发布时间】：2020-07-12 13:51:52 【问题描述】：import React, useState, useEffect from 'react';
import Form from 'react-bootstrap/Form';
function Switch(props)
const [enabled, setEnabled] = useState(false);
useEffect(() =>
if(enabled !== props.enabled)
setEnabled(props.enabled);
, [props.enabled]);
const handleChange = () =>
props.handleClusterEnabledChange(!enabled);
setEnabled(!enabled);
return (
<Form.Check
type="switch"
id=props.id
label=""
onChange=handleChange
checked=enabled
/>
);
export default Switch;
错误：
./src/containers/administration/dwConnections/switch.js 第 11:6 行：React Hook useEffect 缺少依赖项：'enabled'。要么包含它，要么移除依赖数组 react-hooks/exhaustive-deps
【问题讨论】：
【参考方案1】：只需添加 enabled 作为依赖项：
useEffect(() =>
if(enabled !== props.enabled)
setEnabled(props.enabled);
, [enabled, setEnabled, props.enabled]);
【讨论】：
setEnabled 也将是一个依赖项以上是关于如何修复 React Hook useEffect 缺少依赖项的主要内容，如果未能解决你的问题，请参考以下文章
React+Typescript：修复 UseEffect Hook（回调+清理函数错误）
如何使用 useEffect() 更改 React-Hook-Form defaultValue？
我应该如何测试使用 Typescript 进行 api 调用的 React Hook “useEffect”？
如何避免“React Hook useEffect 缺少依赖项”和无限循环