Как мне использовать хуки во вложенном компоненте

avatar
John Doah
8 августа 2021 в 18:13
58
2
0

Я создаю приложение с помощью React Native, и у меня есть компонент карточки. Для этого компонента карты требуется несколько хуков, проблема в том, что компоненты карты отображаются в FlatList в компоненте HomeScreen.

Иерархия такая:

-Homescreen Component
---FlatList
----Card1
----Card2
----Card3

Насколько я понимаю, невозможно использовать React Hooks в моем компоненте карты (ошибка недопустимого вызова ловушки). что означает, что я не могу использовать что-то вроде PanGestureHandler, потому что для этого мне нужно использовать хуки. Я ничего не смог найти, но я уверен, что это распространенная проблема, и для нее есть решение. Как лучше всего с этим справиться?

Это мой FlatList:

  <FlatList
    showsVerticalScrollIndicator={false}
    style={{padding: 8}}
    data={goals}
    renderItem={({index}) => GoalCard(goals[index], theme, hook1, hook2)}
    keyExtractor={item => item.id}
  />

Это моя карта:

const GoalCard = (goal: IGoal, theme: any, hook1: any, hook2: any) => {   ... }
Источник

Ответы (2)

avatar
Ahmed Gaber
8 августа 2021 в 19:18
1

вы можете передать хук в качестве реквизита, см. пример.


const [value, setValue] = React.useState(1);

<FlatList renderItem={({item}) => <Card value={value} setValue={setValue}/>


const Card = ({value, setValue}) => {
    return <Text onPress={() => setValue(value + 1)}>click me</Text>
}
John Doah
13 августа 2021 в 11:48
0

Большое спасибо!

avatar
rappid juniper
8 августа 2021 в 18:34
1

Вы можете использовать вложенные хуки даже внутри плоского списка, убедитесь, что имя вашего компонента начинается с заглавной буквы и, если возможно, поделитесь дополнительной информацией об ошибке

после изменения используйте props.hook1 и т.д.

<FlatList
    showsVerticalScrollIndicator={false}
    style={{padding: 8}}
    data={goals}
    renderItem={({index}) => <GoalCard index={goals[index]} theme={theme} hook1={hook1} hook2={hook2})}
    keyExtractor={item => item.id}
  />
John Doah
8 августа 2021 в 18:35
0

Пожалуйста, можно получить пример? Я попытался использовать хуки в компоненте HomeScreen, а затем передать их в качестве реквизита в GoalCard, но это также не сработало. Это то, что вы имели в виду?

rappid juniper
8 августа 2021 в 18:37
0

возможно ли вам поделиться кодом flatlist и вашего компонента, как вы точно передаете реквизиты

John Doah
8 августа 2021 в 18:39
0

Конечно! Я добавил его в исходный пост. Надеюсь, это достаточно ясно. Я не добавлял все компоненты, потому что было бы слишком много текста.

rappid juniper
8 августа 2021 в 18:44
0

проверьте, я обновил, может это сработает

John Doah
8 августа 2021 в 18:50
0

Спасибо! Я попробовал это сейчас, но это невозможно, он снова пытается установить крючок1 и возникает ошибка (поскольку крючок1 является константой)

rappid juniper
8 августа 2021 в 18:52
0

можете поделиться кодом GoalCard и тем, как вы объявляете состояние и как вы устанавливаете новое значение

John Doah
8 августа 2021 в 18:59
0

Еще не добрался. Я только что попытался настроить жест панорамирования (следуя руководству) и получил эту ошибку.

rappid juniper
8 августа 2021 в 19:01
0

это здорово, я надеюсь, вы поняли это

John Doah
13 августа 2021 в 11:48
0

Большое спасибо! Плохо, я полностью запутался и использовал решение неправильно, попробовал еще раз, и оно работает!