“在 React 中使用 Typescript,预期 1 个参数,但实际得到 0 个参数”。

huangapple go评论82阅读模式
英文:

"Expected 1 arguments, but got 0." for onClick event in React with Typescript

问题

  1. 接口 IProps {
  2. handleClick: React.Dispatch<React.SetStateAction<boolean>>;
  3. icon?: JSX.Element;
  4. }
  5. const NavLinks: React.FC<IProps> = ({ handleClick }) => (
  6. <div className="sidebar_navlinks">
  7. {sidebar_links.map((link) => (
  8. <NavLink key={link.name} to={link.to} onClick={() => handleClick && handleClick()}>
  9. <div className="link">
  10. {link.icon && <link.icon className="icon" />}
  11. {link.name}
  12. </div>
  13. </NavLink>
  14. ))}
  15. </div>
  16. )
  17. <NavLinks handleClick={() => setMenuState(false)} />
英文:

I have a handleClick function that I'm trying to pass as a prop for my onClick event within a component. This event just takes a setState function. I set an interface to type this as "handleClick: React.Dispatch<React.SetStateAction<boolean>>;" as nothing else worked and would always give errors, so I assumed all was well, until I went ahead with writing the onClick event into the component declaration, when the error in the title appeared.

Here's the relevant code:

  1. interface IProps {
  2. handleClick: React.Dispatch&lt;React.SetStateAction&lt;boolean&gt;&gt;;
  3. icon?: JSX.Element;
  4. }
  5. const NavLinks: React.FC&lt;IProps&gt; = ({ handleClick }) =&gt; (
  6. &lt;div className=&quot;sidebar_navlinks&quot;&gt;
  7. {sidebar_links.map((link) =&gt; (
  8. &lt;NavLink key={link.name} to={link.to} onClick={() =&gt; handleClick &amp;&amp; handleClick()}&gt;
  9. &lt;div className=&quot;link&quot;&gt;
  10. &lt;link.icon className=&quot;icon&quot; /&gt;
  11. {link.name}
  12. &lt;/div&gt;
  13. &lt;/NavLink&gt;
  14. ))}
  15. &lt;/div&gt;
  16. )

And then with that component I just do something like

  1. &lt;NavLinks handleClick={() =&gt; setMenuState(false)} /&gt;

How can I best type this so it stops giving the error in the title? I'm not clear why it would expect there's a value when I'm typed it to be something that sets state?

I see stuff online that, more often than not, is assuming the onClick is going to apply to an HTML button element, but I'm just using this to click on react-icons, so I'm even more lost.

答案1

得分: 1

handleClick 应该是 () => void 类型,因为 setMenuState 包装在一个函数中。

  1. interface IProps {
  2. handleClick: () => void;
  3. icon?: JSX.Element;
  4. }

如果您直接传递 setMenuState,则它可以被类型化为一个设置状态的函数。

英文:

handleClick should be of type () =&gt; void since setMenuState is wrapped in a function.

  1. interface IProps {
  2. handleClick: () =&gt; void;
  3. icon?: JSX.Element;
  4. }

If you passed setMenuState directly like:

&lt;NavLinks handleClick={setMenuState} /&gt;

then it can be typed as a setState function

huangapple
  • 本文由 发表于 2023年2月19日 16:50:02
  • 转载请务必保留本文链接:https://go.coder-hub.com/75498968.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定