Как убрать «Invalid hook call»?

Question

[Сергей Золотарёв]

Доброго утра!
Почти всю неделю сталкиваюсь на практике с хуками, где не могу решить проблему с ними за время освоения семейства технологии React в целом.
Так как у меня приложение разрабатывается на том же RN, но используя движок Expo, завершаю почти работы над внедрением возможностей мультимедиа в сам проект. Так как при работе с библиотекой expo-av требуется применение хуков, постараясь их применить в коде, компилятор выдал вот такую ошибку:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

Суть ошибки я знаю, но вариантами его исправления воспользовался, но ничего не вышло.

А вы сталкивались с этой проблемой и как вы её правильно решили? Как применять хуки в React Native правильно, грамотно и без ошибок?

Примеры проблемного кода доступны в комментариях к этому вопросу!

Comments

[Сергей Золотарёв]

1. Код первого компонента:
   
   

   import React, {Component, useState, useEffect} from 'react';
   import { Button, View, Text, SafeAreaView, FlatList, StyleSheet, StatusBar } from 'react-native';
   import _ from "lodash";
   import {Categories} from "../data/Categories";
   import {Cards} from "../data/Cards";
   import {CategoryItem} from "../components/CategoryItem";
   import {CardItem} from "../components/CardItem";
   import { Audio } from 'expo-av';
   
   const styles = StyleSheet.create({
       container: {
           flex: 1,
       },
       item: {
           backgroundColor: '#c2e3ff',
           padding: 20,
           height: 10,
           marginVertical: 8,
           marginHorizontal: 16,
       },
       title: {
           fontSize: 12,
       },
   })
   
   export class HomeScreen extends Component {
   
       constructor(props) {
           super(props);
           this.state = {catSelect: 1, shelf:[]};
       }
   
       onCatPress = (item) => {
           console.log('onCatPress');
           this.setState({ catSelect: item.key });
           console.log(this.state);
       };
   
       onCardPress = (item) => {
           console.log('onCardPress');
           let music;
           let shelf = this.state.shelf;
           
           shelf.push(item);
           this.setState({ shelf: shelf });
           console.log(this.state.shelf);
   
           if(item.sound != null) music = item.sound;
           else music = '../assets/sounds/nosound.wav';
           const [ setSound ] = useState();
           useEffect(() => {
               (async () => {
                 const snd = Audio.fromModule(music);
                 await snd.downloadAsync();
                 const notify = await Audio.Sound.createAsync(snd.localUri || snd.uri);
                 setSound(notify);
                 await notify.asyncPlay();
               })();
           }, []);
       };
   
       renderCat = ({item}) => {
           return (
               <CategoryItem
                   category={item}
                   onPress={this.onCatPress.bind(this, item)}
               />
           );
       };
   
       renderCard = ({item}) => {
           return (
               <CardItem
                   card={item}
                   onPress={this.onCardPress.bind(this, item)}
               />
           );
       };
   
       render = () => {
           var sortedCat = _.filter(Cards, {'categorie': this.state.catSelect})
       return (
   <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
   
       <Text>Главный экран</Text>
   
       <View style={styles.container}>
           <FlatList
               data={this.state.shelf}
               renderItem={this.renderCard}
               keyExtractor={item => item.id.toString()}
               onPress={this.onCatPress.bind(this)}
               horizontal={true}
           />
       </View>
   
       <View style={styles.container}>
           <FlatList
               data={sortedCat}
               renderItem={this.renderCard}
               keyExtractor={item => item.id.toString()}
               onPress={this.onCatPress.bind(this)}
               horizontal={true}
           />
       </View>
   
       <View style={styles.container}>
           <FlatList
               data={Categories}
               renderItem={this.renderCat}
               keyExtractor={item => item.key.toString()}
               onPress={this.onCatPress.bind(this)}
   
               horizontal={true}
           />
       </View>
   
       <Button
           title="Категории карточек"
           onPress={() => this.props.navigation.push('Categories')} />
   </View>
       )
       }
   }

   
   
   
2. Код второго компонента:
   
   

   import React, {Component, useState, useEffect} from 'react';
   import {StyleSheet, TouchableOpacity, Image, Text, View} from 'react-native';
   import { Asset } from 'expo-asset';
   
   export class CategoryItem extends Component {
   
   
       render = () => {
   
           const styles = StyleSheet.create({
               container: {
                   flex: 1,
               },
               item: {
                   backgroundColor: '#c2e3ff',
                   padding: 10,
                   height: 5,
                   marginVertical: 4,
                   marginHorizontal: 6,
               },
               title: {
                   fontSize: 6,
               },
               thumbnail: {
                   width: 50,
                   height: 50,
               }
           })
   
   
   
           const {onPress, category} = this.props;
           let img;
   
   
           if(category.image != null) img = category.image;
           else img = '../assets/images/noimage.png';
   
           const [ setReady ] = useState();
           const [image, setImage] = useState([]);
           useEffect(() => {
               (async () => {
                 const image = Asset.fromModule(img);
                 await image.downloadAsync();
                 setImage(image);
                 setReady(true);
               })();
           }, []);
   
           return (
               <TouchableOpacity onPress={onPress}>
               <View style={styles.item}>
                   <Text>{category.title}</Text>
                   <Image style={styles.thumbnail} source={{ uri: image.localUri || image.uri }} />
               </View>
               </TouchableOpacity>
           );
       };
   }

   
   
   
3. Код домашнего экрана приложения:
   
   

   import React, {Component, useState, useEffect} from 'react';
   import {StyleSheet, TouchableOpacity, Image, Text, View} from 'react-native';
   import { Asset } from 'expo-asset';
   export class CardItem extends Component {
   
       render = () => {
           const {onPress, card} = this.props;
           let img;
   
           const styles = StyleSheet.create({
               container: {
                   flex: 1,
               },
               item: {
                   backgroundColor: '#c2e3ff',
                   padding: 20,
                   height: 10,
                   marginVertical: 8,
                   marginHorizontal: 16,
               },
               title: {
                   fontSize: 12,
               },
               thumbnail: {
                   width: 100,
                   height: 100,
               }
           })
   
           if(card.image != null) img = card.image;
           else img = '../assets/images/noimage.png';
           
           const [ setReady ] = useState();
           const [image, setImage] = useState([]);
           useEffect(() => {
               (async () => {
                 const image = Asset.fromModule(img);
                 await image.downloadAsync();
                 setImage(image);
                 setReady(true);
               })();
           }, []);
   
           return (
               <TouchableOpacity onPress={onPress}>
               <View style={styles.item}>
                   <Text>{card.title}</Text>
                   <Image style={styles.thumbnail} source={{ uri: image.localUri || image.uri }} />
               </View>
               </TouchableOpacity>
           );
       };
   }

   
   
   

[davidnum95]

Сергей Золотарёв, Нужно переписать с классов на функциональные компоненты

[Сергей Золотарёв]

davidnum95, недавно пришла мне идея в голову о том, что могу применить промисы внутри классовых компонентов, избавляясь от хуков и промисы решат такого рода проблемы. Основы промисов и асинхронности знаю, но на практике с этим я не игрался. А как превратить проблемные хуки в полне работающие промисы?