Использование хуков для простого запроса на выборку и нарушение правил хуков, не знаете как? - PullRequest
Новая
       20

Использование хуков для простого запроса на выборку и нарушение правил хуков, не знаете как?

2 голосов
/ 24 февраля 2020

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

Результат этого вызова (массив пользовательских данных) необходимо экспортировать как функцию и вызвать в другом файле.

Если кто-то может заметить что-то, что я пропустил, и может подсказать, как я нарушаю правила хуков, я был бы благодарен!

Спасибо! 


const FetchUsers = () => {
  const [hasError, setErrors] = useState(false);
  const [Users, setUsers] = useState({});

  async function fetchData() {
    const res = await fetch(
      "USERSDATABASE"
    );
    res
      .json()
      .then(res => setUsers(res))
      .catch(err => setErrors(err));
  }

  useEffect(() => {
    fetchData();
  }, []);

  return Users;
};
export { FetchUsers };

израсходовано здесь .... 


class UsersManager {
  constructor() {
    this.mapUserCountries = {};
  }
  init() {
    const mappedUsers = FetchUsers();
    mappedUsers.forEach(user => {
      const c = user.country;

      if (!this.mapUserCountries[c])
        this.mapUserCountries[c] = { nbUsers: 0, users: [] };
      this.mapUserCountries[c].nbUsers++;
      this.mapUserCountries[c].users.push(user);
    });
  }

  getUsersPerCountry(country) {
    return this.mapUserCountries[country];
  }
}

export default new UsersManager();

Ответы [ 2 ]

2 голосов
/ 24 февраля 2020

Проблема в том, что вы вызываете FetchUsers внутри компонента Class, а FetchUsers выполняет React Hook. Это не разрешено React.

1 голос
/ 24 февраля 2020

Первый - хуки не работают внутри компонентов, основанных на классах.

Второй - все пользовательские хуки должны начинаться с use, в вашем случае useFetchUsers. Установив use в качестве префикса, response будет отслеживать ваш хук на deps и вызов в правильном порядке и т. Д.

...