Javascript 警告'；详尽的deps'；不断要求提供完整的'；道具'；对象，而不允许单个'；道具'；方法作为依赖项

这个问题与

eslint插件相关

当我在CodeSanbox中使用React沙箱时，我可以使用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”。包括它或删除依赖项数组。（反应钩/详尽的deps）eslint

如果我将

[props.myProp]

添加到数组中，警告就会消失

但是在我的本地环境中的VSCode中的同一个示例1中，我得到了以下警告：

React Hook useEffect缺少依赖项：“props”。包括它或删除依赖项数组。但是，当任何道具发生变化时，“道具”都会发生变化，因此首选的修复方法是在useEffect调用之外对“道具”对象进行分解，并引用useEffect.eslint（react hooks/dep）中的特定道具

Is询问我缺少完整的

道具

对象。如果我将

[props.myProp]

添加到数组中，警告不会消失。尽管代码按预期工作

我希望在VSCode的本地环境中，我会得到与CodeSandbox相同的行为

会发生什么？在

eslint-plugin-react-hooks

中是否有我可以更改的配置

套餐

开发人员：

正规的

"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"]
      }
    }
  }
}

---

这个问题的答案在这里得到了某种程度的回答：

插件之所以会有不同的看法，是因为通过执行

props.whatever（）

实际上是将

props

本身作为

传递给
whatever
。所以从技术上讲，它会看到陈旧的道具

通过在调用之前阅读函数，可以避免问题

虽然答案说解构是答案，但有一点需要注意。除解决警告（99%的情况）或中断代码外，解构或重新分配都不会产生任何效果。如果您解构或重新分配，函数将没有此

，如果这不是问题，则警告没有意义。下面是一个人工案例的演示，其中任何一个都很重要

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} />
  );
};

在这种情况下，mac会吠叫两次，因为回调没有改变。因此，解决方案是按照警告建议，确保

[props.dog]

位于依赖项数组中，或者知道不需要

此

并对其进行结构化或重新分配值以规避警告

---

在控制台中演示：

谢谢John。我开始讨论这个问题。现在我正在使用一个辅助变量来分配方法，所以我不会直接调用它，linter也不会给出任何警告。Like

const aux=props.method。我很少在代码中使用
这个
关键字，因此我没有遇到任何问题，但很高兴知道它可能会破坏一些东西。这并不完全是一个bug，但正如您在Github问题上看到的，还有其他人被这个警告“窃听”。我刚刚遇到这个问题，并认为它没有一个真正彻底的答案，并想澄清一些要点。希望有帮助！我只是做了一些小的修改来澄清语言。
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} />
  );
};

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;
};