在既不是 React 函数组件也不是自定义 React Hook 函数的函数中调用 React Hook “useState”答案

【问题标题】：React Hook "useState" is called in function which is neither a React function component or a custom React Hook function在既不是 React 函数组件也不是自定义 React Hook 函数的函数中调用 React Hook “useState”
【发布时间】：2021-11-27 00:37:09
【问题描述】：

我正在尝试使用反应钩子创建悬停以显示 div，但我遇到了这个问题：

第 69:31 行：在函数中调用 React Hook “useState” “renderHideOptionalClauseTrigger”既不是 React 函数组件或自定义 React Hook 函数 react-hooks/rules-of-hooks

搜索关键字以了解有关每个错误的更多信息。

这是我的代码库：

import React, { useState, useEffect } from "react";

const renderHideOptionalClauseTrigger = () => {
  const [inHover, setHover] = useState(false);

  return (
    <div className="my-option-clause">
      <text>My Optional Loan Clause</text>
      <svg
        width="16"
        height="16"
        viewBox="0 0 16 16"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
      >
        <path fill-rule="evenodd" clip-rule="evenodd" d="..."/>
      </svg>
    </div>
  );
};


function LoanTerms(props) {
  const router = useRouter();
  const {
    currentLoan,
    getUserLoanRequest,
    updateUserLoanProposalRequest,
    user,
  } = props;

return (

<>
...
                  <Collapsible
                    trigger={renderOptionalClauseTrigger()}
                    classParentString="opt-data"
                    overflowWhenOpen="visible"
                    triggerWhenOpen={renderHideOptionalClauseTrigger()}
                  >

                    <div className="FlowCard__info-text">
                      Will be added verbatim as last clause to the loan
                      agreement. See{" "}
                      <Link className="orange-link" to="/product">
                        Product page
                      </Link>{" "}
                      for other clauses. (1000 characters)
                    </div>
<>

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

为了渲染您的组件并在任何地方使用它，您必须在文件末尾导出组件。在你的情况下，如果你想使用LoanTerms，你应该写export default LoanTerms。

【讨论】：

【解决方案2】：

React 期望 React 组件以大写的首字母命名。尝试 RenderHideOptionalClauseTrigger 而不是 renderHideOptionalClauseTrigger

【讨论】：

我尝试了渲染...它对我有用！谢谢
但是我可以在 svg 上使用 onHover 吗？