Недопустимый вызов ловушки в функции реагирования, ImagePicker и ActionSheet - PullRequest
Новая
       9

Недопустимый вызов ловушки в функции реагирования, ImagePicker и ActionSheet

1 голос
/ 01 апреля 2020

Мне действительно нужна помощь с ловушками в реагировать на родные ...

У меня есть ActionSheet, который включает один из параметров, которые должна открывать функция камеры с помощью функции "useCamera".

«useCamera» находится в другой функции (в другом файле), используя библиотеку «ImagePicker». (указать c «ImagePicker.launchCamera»)

«ImagePicker.launchCamera» установить fileUri в обратном вызове, в то время как функция ничего не возвращает.

Итак, чтобы получить доступ к файлу Uri, я попытался использовать useState Hook, но получаю сообщение «ERROR: Invalid Hook call.Hooks можно вызывать только внутри тела функции ...», но ловушку внутри функции bodY!

Код ActionSheet: 

    import {useCamera} from './PhotoHandle';

// export default class EditProfilePic extends React.Component {
function EditProfilePic(props) {
  const [ActionSheetRef, setActionSheetRef] = useState(null);
  const [fileDate, setFileDate] = useState(null);

  return (
    <View style={styles.images_container}>
      <TouchableOpacity
        style={styles.click_edit_icon}
        onPress={() => ActionSheetRef.show()}>
        <Image style={styles.editIcon} source={editIcon} />
      </TouchableOpacity>
      <Image source={props.profileSource} style={styles.image} />
      <ActionSheet
        ref={o => setActionSheetRef(o)}
        title={
          <Text style={{color: '#000', fontSize: 18}}>
            Which one do you like?
          </Text>
        }
        options={['Select from Photos', 'Camera', 'Cancel']}
        cancelButtonIndex={2}
        destructiveButtonIndex={2}
        onPress={index => {
          //camera
          if (index == 1) {
            useCamera()
          }
        }}
      />
    </View>
  );
}

Функция LaunchCamera: 

export function useCamera() {
  const [fileData, setFileData] = useState(null);
  let options = {
    storageOptions: {
      skipBackup: true,
      path: 'images',
    },
  };

  ImagePicker.launchCamera(options, response => {
    console.log('coolio' + response);
    if (response.didCancel) {
      console.log('User cancelled image picker');
    } else if (response.error) {
      console.log('ImagePicker Error: ', response.error);
    } else if (response.customButton) {
      console.log('User tapped custom button: ', response.customButton);
      alert(response.customButton);
    } else {
      setFileData(response.data);
    }
  });
  return fileData;
}

Я пытался вызвать useCamera ( ) как "",
Я изменил анонимную функцию просто на функцию.
Я пытался вызвать useCamera () из другой части кода (не из onPress).
Я пытался используйте Context и Redux.

ВСЕ ОДИНАКОВАЯ ОШИБКА.
, пожалуйста, помогите мне,
Спасибо!

Ответы [ 2 ]

0 голосов
/ 02 апреля 2020

Я вижу знак, вы звоните this.setState, это означает, что вы используете компонент на основе классов. реактивный крюк может использоваться только в функциональном компоненте. Вы должны преобразовать компонент, который называется LaunchCamera() (он должен быть переименован в useCamera()), в функциональный компонент.

0 голосов
/ 02 апреля 2020

У меня раньше была эта проблема, какую версию React-Native вы используете?

React 16.8.0 - это первый выпуск, поддерживающий Hooks. При обновлении не забудьте обновить все пакеты, включая React DOM. React Native поддерживает Hooks начиная с версии 0.59 React Native.

https://reactjs.org/docs/hooks-intro.html

...