Question

我正在尝试从redux获取信息，但发生此错误，我不知道该如何解决。这是我第一次对胡克斯做出反应，对不起，但我迷路了。预先谢谢你。

React Hook "useSelector" is called in function "header" which is neither a React function component or a custom React Hook function

我的代码：

import React from 'react';
import { useSelector } from 'react-redux';
import { Link } from 'react-router-dom';
import Notifications from '../Notifications';

import logo from '~/assets/headerLogo.svg';
import { Container, Profile, Content } from './styles';

export default function header() {
  const profile = useSelector(state => state.user.profile);

  return (
    <Container>
      <Content>
        <nav>
          <img src={logo} alt="GoBarber" />
          <Link to="/dashboard">DASHBOARD</Link>
        </nav>
        <aside>
          <Notifications />
          <Profile>
            <div>
              <strong>{profile.name}</strong>
              <Link to="/profile">Meu Perfil</Link>
            </div>
            <img
              src={
                profile.avatar.url ||
                'https://api.adorable.io/avatars/50/abott@adorable.png'
              }
              alt="profile"
            />
          </Profile>
        </aside>
      </Content>
    </Container>
  );
}

Answer 1

rules of hooks lint plugin依赖于命名约定来告知什么是组件，什么是钩子以及什么是其他函数。以use开头的函数（例如useEffect，useMyCustomStuff）被认为是钩子。以大写字母开头的功能被认为是组件。您的代码都不做，因此假设这只是与钩子或组件无关的普通函数。

将header重命名为Header来解决此问题。

为什么我的react函数中会发生此问题？

1 个答案: