Активировать функцию обратного отсчета с помощью датчика акселерометра

Question

У меня проблема с тем, что я хочу вызвать функцию или что-то еще, которые подсчитывают число, если на оси x датчика акселерометра достигнуто определенное число c. Я пытаюсь сделать это с помощью функции, которая стоит в части рендеринга, но была проблема, которую он не считает.

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

https://i.stack.imgur.com/4avBY.png

Вот что я получил до сих пор

import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { Accelerometer } from 'expo-sensors';

export default function App() {
  const [data, setData] = useState({});
  const [count, setCount] = useState(0);

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

  useEffect(() => {
    return () => {
      _unsubscribe();
    };
  }, []);

  const _toggle = () => {
    if (this._subscription) {
      _unsubscribe();
    } else {
      _subscribe();
    }
  };

  const _subscribe = () => {
    this._subscription = Accelerometer.addListener(accelerometerData => {
      setData(accelerometerData);
    });
  };

  const _unsubscribe = () => {
    this._subscription && this._subscription.remove();
    this._subscription = null;
  };

  let { x, y, z } = data;
  return (
    <View style={styles.sensor}>
      <Text style={styles.text}>Accelerometer: (in Gs where 1 G = 9.81 m s^-2)</Text>
      <Text style={styles.text}>
        x: {x} y: {y} z: {z}
      </Text>
      <View style={styles.buttonContainer}>
        {x > 0.7 ? setCount(count + 1) : <Text>doesnt work</Text>}
        <Text>{count}</Text>
      </View>
    </View>
  );
}



const styles = StyleSheet.create({
  buttonContainer: {
    flexDirection: 'row',
    alignItems: 'stretch',
    marginTop: 15,
  },
  button: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#eee',
    padding: 10,
  },
  middleButton: {
    borderLeftWidth: 1,
    borderRightWidth: 1,
    borderColor: '#ccc',
  },
  sensor: {
    marginTop: 45,
    paddingHorizontal: 10,
  },
  text: {
    textAlign: 'center',
  },
});

Answer 1

Вы не должны использовать ключевое слово this внутри функции, используйте ловушку useRef, чтобы получить аналогичное поведение.

useEffect(() => {
    _toggle();

     return () => {
      _unsubscribe();
    };

}, []);