带有 useState 的 Radium 使钩子调用无效答案

【问题标题】：Radium with useState makes Invalid hook call带有 useState 的 Radium 使钩子调用无效
【发布时间】：2019-08-28 01:11:07
【问题描述】：

我使用 Radium 并且它可以工作，但是当我添加 useState 时出现此错误：无效的挂钩调用。 Hooks 只能在函数组件的主体内部调用...

我可以在不将功能更改为类的情况下修复它吗？

import React, {useState} from 'react';
import Radium, {StyleRoot} from 'radium';

const App = ()=>{
  const [tab, updateTab] = useState([1, 2, 3]);

  return (
    <StyleRoot>
      <div className='App'>

      </div>
    </StyleRoot>
  )
};

export default Radium(App);

【问题讨论】：

这个错误基本上意味着你违反了rules of hooks。

标签： reactjs radium

【解决方案1】：

我可以在不将功能更改为类的情况下修复它吗？

是的。要完成这项工作，请extract a component 放置您的钩子。

const Root = () => {
  const [tab, updateTab] = useState([1, 2, 3]);
  return <div className="App" />;
}

const App = () => {
  return (
    <StyleRoot>
      <Root />
    </StyleRoot>
  )
};

export default Radium(App);

【讨论】：

所以每个包含 useState 的组件我都应该包装新函数。但是为什么没有它就不行呢？
如果是类组件，则关注2 rules of hooks。