Expo传感器应用中如何将陀螺仪数据点存储至数组

嘿，我懂你碰到的麻烦了——你现在每次触发陀螺仪监听回调时，都是直接用setX([x])来更新状态，这相当于每次都创建一个只包含当前x值的全新数组，完全替换掉了之前的数组，自然没法实现数据累积啦。

问题根源 #

useState的状态更新如果依赖于之前的状态值，直接使用当前的状态变量（比如你代码里的x）可能会因为闭包问题拿到旧值，而且你现在的写法是直接替换数组，不是在原有数组基础上追加新元素。

修复后的代码 #

你需要使用函数式更新的方式来更新数组，这样能确保每次都是基于最新的状态数组来添加新数据：

import { useState, useEffect } from 'react';
import { Gyroscope } from 'expo-sensors';

export default function SensorApp() {
  // 用更清晰的变量名区分累积数组和当前值
  const [xData, setXData] = useState([]);
  const [currentY, setCurrentY] = useState(0);
  const [currentZ, setCurrentZ] = useState(0);

  useEffect(() => {
    const subscription = Gyroscope.addListener(({ x, y, z }) => {
      // 函数式更新：基于最新的旧数组追加新x值
      setXData(prevData => [...prevData, x]);
      setCurrentY(y);
      setCurrentZ(z);
    });

    // 组件卸载时务必取消监听，避免内存泄漏
    return () => subscription.remove();
  }, []);

  // 监听xData变化，仅在数组更新时打印
  useEffect(() => {
    console.log('累积的x数组:', xData);
  }, [xData]);

  return (
    // 你的组件UI内容
    <></>
  );
}

关键说明 #

1. 函数式更新：setXData(prevData => [...prevData, x])里的prevData是React提供的当前最新状态数组，用扩展运算符...展开旧数组元素后添加新的x，就能实现数据的持续累积。
2. 清理监听：在useEffect的返回函数中移除陀螺仪监听，避免组件卸载后仍持续触发回调导致内存泄漏。
3. 打印时机优化：直接在组件顶层打印数组会随每次渲染重复输出，用useEffect监听xData变化，只有数组更新时才打印，结果会更清晰。

如果需要累积y和z的数据，只需要给它们创建对应的状态数组，用同样的函数式更新逻辑即可～

内容的提问来源于stack exchange，提问作者Kokab Shakil