时间戳

首页 > 解决方案 > 你如何根据 React 中的点击来改变状态？

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

问题描述

如何根据用户操作（如 onClick）做一个简单的 useState 钩子？在下面的示例代码段中，setCount不允许出现在函数内部，并且违反了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>
  );
};

这是 JSFiddle 上完整工作示例的链接。

标签： reactjsreact-hooksuse-statereact-statereact-state-management

解决方案

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

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

推荐阅读