你如何根据 React 中的点击来改变状态？答案

【问题标题】：How do you change state based on a click in React?你如何根据 React 中的点击来改变状态？
【发布时间】：2021-04-19 17:31:28
【问题描述】：

如何根据用户操作（如 onClick）来做一个简单的 useState 挂钩？在下面的示例 sn-p 中，setCount 不允许在函数内部，违反了Rules of Hooks，导致：

错误：Invalid hook call. Hooks can only be called inside of the body of a function component.

const [count, setCount] = React.useState(0);

function Btn () {
  const myClickHandler = (c)=>{
      setCount(c+1);// <- WHOOPS!! This violates rules of hooks! Hook can't be in a click handler.
  }; 

  return (
    <button onClick={()=>myClickHandler(count)}>
      You've clicked {count} times.
    </button>
  );
};

Here is a link to a fully working example on JSFiddle.

【问题讨论】：

该代码不是在函数组件内吗？ return 不是顶级的有效语法。
这是一个sn-p。完整的上下文将显示一个标准的反应文件，其中包含一个包装 sn-p 的功能组件。
请给minimal reproducible example。当我将该代码放入函数时，ESLint 插件不会抱怨。
好的，添加到 jsfiddle 示例的链接。
请注意，MRE 必须在问题中，而不是站外链接。 JSFiddle 在这里用处不大，因为是的，它完全工作，不会显示任何 Hooks 规则错误（同样，我的本地设置也没有，尽管启用了 ESLint 规则）。 setCount 不是钩子，甚至 - useState 是钩子。

标签： reactjs react-hooks use-state react-state react-state-management

【解决方案1】：

对 useState (setCount(c+1)) 的调用实际上是正确的。

钩子声明（const [count, setCount] = React.useState(0)）在函数的外面和上面，这是错误的地方。将它移到函数内部，一切都会正常工作。

【讨论】：

【解决方案2】：

只需将 useState 方法移动到您的函数中

const [count, setCount] = useState(); 大多数用于功能组件而不是文件中的文件

【讨论】：