reactjs - 为什么我的react函数会出现这个问题？

Question

我正在尝试从 redux 获取信息，但是发生了这个错误，我不知道如何修复它。这是我第一次使用 React 和 React Hooks，抱歉，我迷路了。 预先感谢您。

1. React Hook“useSelector”在函数“header”中调用，该函数既不是 React 函数组件，也不是自定义 React Hook 函数

我的代码:

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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a5c4c7cad1d1e5c4c1cad7c4c7c9c08bd5cbc2" rel="noreferrer noopener nofollow">[email protected]</a>'
              }
              alt="profile"
            />
          </Profile>
        </aside>
      </Content>
    </Container>
  );
}

Answer 1

rules of hooks lint plugin取决于命名约定来区分什么是组件、什么是钩子(Hook)以及什么是任何其他函数。以use 开头的函数(例如useEffect、useMyCustomStuff)被假定为钩子(Hook)。以大写字母开头的函数被假定为组件。您的代码两者都不做，因此它假设这只是一个与钩子(Hook)或组件无关的普通函数。

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