简短回答

Question

我无法理解使用React钩子重新创建componentDidMount生命周期函数行为的正确方法。

我发现普遍接受的方法是这样的：

useEffect(() => {
  //do componentDidMount stuff here
}, []);

但是，当有其他参数，其他依赖项等时，我会出现掉毛错误，如本例所示：

useEffect(() => {
  fetchData(design, onSuccess, onError);
}, []);

那会引发掉毛错误。处理这种情况的正确方法是什么？我想避免禁用eslint。

React Hook useEffect缺少依赖项：“ design”和“ onSuccess”。要么包含它们，要么删除依赖项数组react-hooks / exhaustive-deps

Answer 1

我猜测您遇到exhaustive-deps错误？

使用useEffect时，建议将效果中使用的所有值都放在依赖关系数组中，以使您对效果使用哪个值保持“诚实”。丹在https://overreacted.io/a-complete-guide-to-useeffect/#two-ways-to-be-honest-about-dependencies上对此进行了讨论。

但是，如果您乐于忽略此错误并确定只希望该效果在组件首次渲染时运行，则可以使用// eslint-disable-line exhaustive-deps安全地忽略皮棉错误。

编辑：真的没有办法解决这个问题，因为严格来说，最终您对自己的部门不是“诚实”的。

Answer 2

您可以查看this issue。我觉得这很有趣。

您还可以查看阿隆在回答中提到的Two Ways to Be Honest About Dependencies。理解钩子依赖关系非常有趣并且很有趣。

我想避免禁用eslint。

要做到这一点，这就是您需要做的。

在本期中，有人给出了一个example，他从useEffect之外调用了一个函数。

const hideSelf = () => {
    // In our case, this simply dispatches a Redux action
};


// Automatically hide the notification
useEffect(() => {
    setTimeout(() => {
        hideSelf();
    }, 15000);
}, []);

然后阅读所有评论并查看Dan Abramov comment

...但是在这个特定示例中，惯用的解决方案是将hideSelf放在效果内

这意味着要做

// Automatically hide the notification
useEffect(() => {
    const hideSelf = () => {
        // In our case, this simply dispatches a Redux action
    };
    setTimeout(() => {
        hideSelf();
    }, 15000);
}, []);

这个示例可以在不使用eslint禁用的情况下解决问题。

如果这不是您的情况（也许您使用Redux之类的东西），则应将其视为效果的依存性

...如果它调度Redux操作，则将该操作作为依赖项

要解决此问题，它会视您的情况而定。您没有给我们一个清楚的例子说明您的情况，所以我找到了一个可以给您一个通用解决方案的例子。

简短回答

在效果依赖项中（在[]内部）添加效果之外的所有内容

OR

声明效果内部的功能。

用钩子复制componentDidMount的正确方法是什么？

2 个答案:

简短回答