![](/img/trans.png)
[英]React useEffect dependencies for subscribe/unsubscribe with eslint exhaustive-deps
[英]Warning for 'exhaustive-deps' keeps asking for the full 'props' object instead of allowing single 'props' methods as dependencies
这个问题与eslint-plugin-react-hooks
当我在 CodeSanbox 中使用 React Sandbox 时,我可以使用 props 对象的单个属性作为 useEffect 钩子的依赖项:
示例 1:
useEffect(()=>{
console.log('Running useEffect...');
console.log(typeof(props.myProp)); // USING ONLY 'myProp' PROPERTY
},[ ]); // EMPTY ARRAY
示例 1 在 CodeSandbox 环境中给了我以下警告:
React Hook useEffect 缺少依赖项:'props.myProp'。 包括它或删除依赖项数组。 (react-hooks/exhaustive-deps) eslint
如果我将[props.myProp]
添加到数组中,警告就会消失。
但是在我的 VSCode 本地环境中的相同示例 1,我收到以下警告:
React Hook useEffect 缺少一个依赖项:'props'。 包括它或删除依赖项数组。 然而,'props' 会在任何 props 改变时改变,所以首选的解决方法是在 useEffect 调用之外解构 'props' 对象,并在 useEffect.eslint(react-hooks/exhaustive-deps) 中引用那些特定的 props
是问我缺少完整的props
对象。 如果我将[props.myProp]
添加到数组中,警告不会消失。 尽管代码按预期工作。
我希望我会在 VSCode 的本地环境中获得与在 CodeSandbox 上获得的行为相同的行为。
会发生什么? 我可以在eslint-plugin-react-hooks
更改任何配置吗?
套餐
开发:
"eslint": "^5.10.0",
"eslint-plugin-react": "^7.11.1",
"eslint-plugin-react-hooks": "^1.6.1",
常规的
"react": "^16.8.6",
"react-dom": "^16.8.6",
.eslintrc.json
{
"root" :true,
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"node": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:import/errors"
],
"parser":"babel-eslint",
"parserOptions": {
"ecmaVersion": 8,
"sourceType": "module",
"ecmaFeatures": {
"jsx":true
}
},
"plugins":[
"react",
"react-hooks"
],
"rules": {
"react/prop-types": 0,
"semi": "error",
"no-console": 0,
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn"
},
"settings": {
"import/resolver" : {
"alias" : {
"map" : [
["@components","./src/components"],
["@constants","./src/constants"],
["@helpers","./src/helpers"]
],
"extensions": [".js"]
}
}
}
}
这个问题的答案在这里有些回答: https : //github.com/facebook/react/issues/16265#issuecomment-517518539
该插件之所以看到它不同是因为这样做
props.whatever()
你实际上是通过props
本身作为this
值whatever
。 所以从技术上讲,它会看到陈旧的道具。通过在调用之前读取函数,您可以避免这个问题。
虽然答案说解构就是答案,但有一个小小的警告。 除了解决警告(99% 的情况)或破坏您的代码之外,解构或重新分配将没有任何效果。 如果您解构或重新分配,该函数将没有this
,如果这不是问题,则警告毫无意义。 这是一个人为案例的演示,其中任何一个都很重要。
function bark() {
console.log(`${this.name} barked.`);
}
const mac = {
name: "mac",
bark
};
const cheese = {
name: "cheese",
bark
};
const DogBark = props => {
useEffect(() => props.dog.bark(), [props.dog.bark]);
return null;
};
const Dog = () => {
const [dog, setDog] = React.useState(mac);
useEffect(() => setDog(cheese), []);
// will cheese bark?
return (
<DogBark dog={dog} />
);
};
奶酪不会吠叫。 当您开始使用useCallback
时,问题变得更糟:
const DogBarkByCallback = props => {
const bark = React.useCallback(() => props.dog.bark(), [props.dog.bark]);
// every dog should bark, and if the definition of
// bark changes even though the dog is the same, it should bark again
useEffect(() => bark(), [props.dog, bark]);
return null;
};
在这种情况下,mac 吠叫两次,因为回调没有改变。 因此,解决方案是确保[props.dog]
位于您的依赖项数组中,正如警告所建议的那样,或者知道您不需要this
并解构或重新分配值以规避警告。
在控制台中演示: https : //codesandbox.io/s/exhaustive-deps-fn-mrdld
您是否考虑过破坏财产?
const { myProp } = props
useEffect(()=>{
console.log('Running useEffect...');
console.log(typeof(myProp)); // USING ONLY 'myProp' PROPERTY
},[myProp]);
我了解发生了什么事。 这不是一个错误(我认为)。
这段代码:
useEffect(()=>{
function someFunction() {
props.whatever(); // CALLING A FUNCTION FROM PROPS
}
},[ ]);
结果如下:
React Hook useEffect缺少依赖项:“ props”。 包括它或删除依赖项数组。 但是,“ props”将在任何 prop发生更改时发生更改,因此首选解决方法是在useEffect调用之外对“ props”对象进行解构,并引用useEffect内部的那些特定prop。 (反应钩/穷举)
这段代码:
useEffect(()=>{
function someFunction() {
props.whatever; // ACCESSING A PROPERTY FROM PROPS
}
},[]);
结果如下:
React Hook useEffect缺少依赖项:“ props.whatever”。 包括它或删除依赖项数组。 (反应钩/穷举)
我不确定为什么,但是当您从props
调用方法或从props
property
时,插件对它的看法有所不同。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.