Возможен вызов функции внутри хука React - PullRequest
Новая
       7

Возможен вызов функции внутри хука React

0 голосов
/ 11 июля 2020

У меня есть компонент, подобный приведенному ниже, на основе хуков 

import React, { useEffect, useState } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Animated
} from 'react-native';
import CAStyles from '../res/CAStyles';

const CACard = (props ) => (
    <TouchableOpacity onPress={props.cardTouched}>
        <View style={[styles.cardContainer, CAStyles.ALIGN_CENTER]} width={props.width} height={props.height}>
          <Text style={styles.textStyle}>{props.title}</Text>
        </View>
    </TouchableOpacity>
);



export default CACard

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

Мои последующие попытки найти решение бесполезны. Может кто-нибудь мне здесь поможет. Заранее спасибо.

Ответы [ 2 ]

1 голос
/ 11 июля 2020

Как правильно указал Дж. Мадлен. Вам нужно написать useState внутри определения функционального компонента. Измените структуру кода следующим образом: 

import React, { useEffect, useState } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Animated
} from 'react-native';
import CAStyles from '../res/CAStyles';

const CACard = (props) =>{
    const [aStateVar, setAStateVar] = useState(false);

    return (
    <TouchableOpacity onPress={props.cardTouched}>
        <View style={[styles.cardContainer, CAStyles.ALIGN_CENTER]} width={props.width} height={props.height}>
          <Text style={styles.textStyle}>{props.title}</Text>
        </View>
    </TouchableOpacity>
    );

};

export default CACard;
1 голос
/ 11 июля 2020

Спасибо @JMadelaine за указание на это. Я изменил, как показано ниже, и все работает нормально. 

const CACard = (props ) => {

  return (
    <TouchableOpacity onPress={props.cardTouched}>
        <View style={[styles.cardContainer, CAStyles.ALIGN_CENTER]} width={props.width} height={props.height}>
          <Text style={styles.textStyle}>{props.title}</Text>
        </View>
    </TouchableOpacity>
  )
    
};
...