在函数中调用 React Hook "useSelector"

IT技术 javascript reactjs react-redux
2021-04-29 12:16:01

我无法弄清楚“useSelector”发生了什么，我几乎不需要帮助。

错误

React Hook "useSelector" 在函数 "render_user" 中调用，该函数既不是 React 函数组件也不是自定义 React Hook 函数

class Navigationbar extends Component {

  onLogoutClick = e => {
    e.preventDefault();
    this.props.logoutUser(); //this.props.
  };

  render() {
      const render_user = () => {

        const auth = useSelector(state => state.auth); Error Message is here
        //More Code Here
      );
    };
  } 


Navigationbar.propTypes = {
  logoutUser: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  auth: state.auth
});

export default connect(
  mapStateToProps,
  { logoutUser }
)(Navigationbar);
3个回答

错误是由于您违反了hooks 规则：

  • 只在顶层调用钩子
  • 只从 React 函数调用钩子

违规行为：

  1. useSelector()不在顶层调用。这就是所谓render_user()的render()（即嵌套函数）。
  2. useSelector() 是类组件的一部分， Navigationbar

您可以提取组件以遵循钩子规则并使用useSelector：

function User() { // Rule 2: call hooks in function component
  const auth = useSelector(state => state.auth); // Rule 1: call hooks in top-level
  return <>{auth}</>
}

class Navigationbar extends Component {

  render_user() {
    if (props.authenticated) {
      return <User />
    }
    // not yet authenticated
    // do something else
  }

  render() {
    return <>{this.render_user()}</>
  }
}

如果您使用的是 TypeScript 和（显然）功能组件。确保您的组件名称以大写字母而不是小写字母开头。

useSelector 是 react-redux 在添加新的Hooks API后添加的新 hook 。

这些钩子只能在函数组件中使用

其它你可能感兴趣的问题
上一篇正在更新 Redux 状态而不分派任何操作 下一篇Gatsby 中的 React 钩子：无效的钩子调用