Javascript 绘制移动设备的实时数据'；s加速计与本机中的时间轴相对

我正在根据时间轴绘制手机加速计的实时数据。

x轴

将有时间，

y轴

将显示加速计的值。我正在使用

react native highcharts

绘制数据。但是输出图是空白的。实时数据绘图的代码在URL中给出。在这段代码中，我只是将加速度计的

y

替换为

x值

输出为：
您正在变异状态，这是React中的一个大禁忌。
状态应始终不变，并且只能通过调用
设置状态来更改。如果您只是像示例中那样直接对其进行变异，那么您的组件将不会更新

我建议您在React中了解更多信息（与React Native相同），然后您将了解如何重构对
this.state.dataArr.push
等的调用

渲染
应该是
道具
和
状态
的纯功能

由于我们看不到整个画面，只有渲染方法（以后请尝试发布完整的示例）我们只能在这里进行假设

我可以想象，在其他一些代码中，您正在记录加速计，并调用
setState
更改
accelerometerData
。（如果通过常规赋值直接更改，请将其更改为
setState
调用。）然后使用相同的
setState
调用，而不是在
render
方法中更改
dataArr

p、 这仍然不是一个完美的解决方案，因为它仍然在使用，但这是另一个更高级的话题。
您的代码始终使用最新的加速计数据，也就是说，您总是绘制一个点（最新的），因此图形似乎是空的

您应该做的是，在状态定义中将
accelerometedData
设置为一个数组，然后在
subscribe
中将数据推送到该数组中，而不是使用
setState
设置最新点，然后从该数组中打印多个点

编辑

澄清：

你的状态应该是

state = {
  accelerometerData: []
};

那么您的订阅将是：

_subscribe = () => {
  this._subscription = Accelerometer.addListener(accelerometerData => {
    let data = this.state.accelerometerData;
    data.push(accelerometerData);
    this.setState({
      accelerometerData: data
    });
  });
};

然后在
render（）
中有
this.state.accelerometerData
这是一个数组，可以通过
this.state.accelerometerData.map（）
或类似的来使用它，我正在绘制加速计的时间轴和
z轴之间的图形<代码>数据阵列
在这里不是问题。这与绘图无关。Plot是我的主要问题我的订阅函数现在看起来像这样
\u subscribe=（）=>{this.\u subscription=accelerometerData=>{this.setState（{accelerometerData}）；this.accelerometerData.push（round（z））；this.setState（{newAccelerometerData:accelerometerData}）；}它给出了一个错误，如“undefined不是对象（计算'\u this.accelerometedData.push'）”。我定义了
accelerometedData
错误：不变冲突：对象作为React子对象无效（找到：具有键{z，y，x}的对象）。