Почему эта проблема происходит в моей функции реагирования? - PullRequest
Новая
       17

Почему эта проблема происходит в моей функции реагирования?

0 голосов
/ 03 ноября 2019

Я пытаюсь получить информацию от редукса, но эта ошибка происходит, и я не знаю, как я могу это исправить. Это мой первый раз с реагировать и реагировать Крюки, извините, но я потерян. Заранее спасибо.

  1. 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>
  );
}

1 Ответ

1 голос
/ 03 ноября 2019

Плагин правил хуков lint зависит от соглашений об именах, чтобы указать, что является компонентом, что является хуком, и что является любой другой функцией. Функции, начинающиеся с use (например, useEffect, useMyCustomStuff), считаются зацепками. Предполагается, что функции, начинающиеся с заглавной буквы, являются компонентами. Ваш код не делает ни того, ни другого, поэтому он предполагает, что это обычная функция, не связанная с хуками или компонентами.

Переименуйте header в Header, чтобы исправить это.

...