如何解决将类组件转换为函数组件时出错

我正在尝试将类组件转换为功能组件。

类组件：classBasedComponent.js [此文件中包含的原始代码]

我取得的进步：

函数组件：functionComponent.js [我的进度]

这里是 GitHub 链接供参考：https://github.com/codebushi/gatsby-starter-dimension

这是我的错误：

12:19 警告 'setArticle' 被分配了一个值但从未使用过没有未使用的变量
27:11 错误 'timeoutId' 未定义无未定义
33:6 警告 React Hook useEffect 缺少依赖项： 'handleClickOutside'。包括它或删除依赖项数组 react-hooks/exhaustive-deps
45:30 错误 'setWrapperRef' 未定义为 no-undef
58:37 警告预期为 '==='，而是看到了 '==' eqeqeq
66:23 错误意外使用“位置”无限制全局变量
80:28 错误 'setWrapperRef' 未定义为 no-undef

我仍然遇到错误。我可以在哪里即兴发挥？

解决方法

让我们专注于错误。

27:11 错误 'timeoutId' 未定义 no-undef

您将此变量声明为 timeoutId，但在引用它时在 timeoutId 和 timeOutId 之间切换。在您当前的沙箱中，它是 timeoutId，因此所有 timeOutId 用法都标记为未声明。选择其中之一并保持一致。

45:30 错误 'setWrapperRef' is not defined no-undef

和

80:28 错误 'setWrapperRef' is not defined no-undef

这看起来是一个由 Main 调用的函数，用于将 ref 传回 something，然后在 handleClickOutside 中引用。使用 react ref 来存储值。

const wrapperRef = React.useRef(null); // create ref to store value

...

const setWrapperRef = node => wrapperRef.current = node; // set current ref value

...

const handleClickOutside = (event) => {
  if (!wrapperRef.current.contains(event.target)) { // access current ref value
    if (isArticleVisible) {
      handleCloseArticle();
    }
  }
}

...

<Main
  isArticleVisible={isArticleVisible}
  timeout={timeout}
  articleTimeout={articleTimeout}
  article={article}
  onCloseArticle={handleCloseArticle}
  setWrapperRef={setWrapperRef} // attach ref value updater
/>

66:23 错误意外使用“位置”无限制全局变量

location 之前是通过 props 收到的，现在很可能仍然是通过 props 收到的。

<Layout location={props.location}>

或者因为我在您的功能组件中没有看到其他对 props 的引用，只需在组件签名中对其进行解构即可。如果您需要访问更多 prop 值，您也可以在此处简单地对其进行解构。

function IndexPage({ location }) { ...

现在是警告

12:19 警告 'setArticle' 被赋值但从未使用过 no-unused-vars

这只是意味着它被定义并且从未使用过，但是在检查基于类的组件时，更新 article 和 handleOpenArticle 中的 handleCloseArticle 值。所以让我们在您的功能组件中做同样的事情。

这里的问题是您向 setIsArticleVisible 更新程序传递了被忽略的额外参数。 useState 更新程序不会浅合并更新，并且您的更新程序被声明为仅包含一个值。我建议还使用功能状态更新来切换布尔状态值。

handleOpenArticle(article) {
  this.setState({
    isArticleVisible: !this.state.isArticleVisible,article
  });

  setTimeout(() => {
    this.setState({
      timeout: !this.state.timeout
    });
  },325);

  setTimeout(() => {
    this.setState({
      articleTimeout: !this.state.articleTimeout
    });
  },350);
}

handleCloseArticle() {
  this.setState({
    articleTimeout: !this.state.articleTimeout
  });

  setTimeout(() => {
    this.setState({
      timeout: !this.state.timeout
    });
  },325);

  setTimeout(() => {
    this.setState({
      isArticleVisible: !this.state.isArticleVisible,article: ""
    });
  },350);
}

变成

const handleOpenArticle = (article) => {
  setIsArticleVisible(isArticleVisible => !isArticleVisible);
  setArticle(article);
  setTimeout(() => setTimeout(timeout => !timeout),325);
  setTimeout(() => setArticleTimeout(articleTimeout => !articleTimeout),350);
};

const handleCloseArticle = (article) => {
  setArticleTimeout(articleTimeout => !articleTimeout);
  setTimeout(() => setTimeout(timeout => !timeout),325);
  setTimeout(() => {
    setIsArticleVisible(isArticleVisible => !isArticleVisible);
    setArticle("");
  },350);
};

33:6 警告 React Hook useEffect 缺少依赖项： 'handleClickOutside'。包括它或删除依赖项数组反应钩子/详尽的deps

通常您希望包含效果的所有依赖项，以便所有值都是正确的，但这里很明显意图是在组件安装时添加侦听器，并在卸载时删除它们。您可以为仅该行添加 eslint-disable 注释。我建议还将 timeoutId/timeOutId 声明移到效果内部，因为它不在效果外部使用。将 undefined 传递给 clearTimeout 也是安全的，它可以处理它，因此删除条件检查。

useEffect(() => {
  const timeoutId = setTimeout(() => {
    setLoading("");
  },100);

  document.addEventListener("mousedown",handleClickOutside);

  return () => {
    clearTimeout(timeoutId);
    document.removeEventListener("mousedown",handleClickOutside);
  };
  // Effect triggered on component mount only
  // eslint-disable-next-line react-hooks/exhaustive-deps
},[]);

58:37 警告预期为 '==='，而是看到了 '==' eqeqeq

不确定此逻辑的来源，但已替换为上面的 wrapperRef 错误修复。

注意：

以上所有建议均完全基于您自我描述/报告的问题以及我在您的沙箱中看到的标记。解决这些问题后可能会出现其他潜在问题（可能是因为它们被它们掩盖了。

将类组件转换为函数组件时出错

如何解决将类组件转换为函数组件时出错

解决方法

让我们专注于错误。

现在是警告

注意：

相关推荐