在reactnative中相对于时间轴绘制移动加速度计的实时数据

我正在相对于时间轴绘制手机加速度计的实时数据。x-axis将有时间，y-axis将显示加速度计的值。我正在使用react-native-highcharts来绘制数据。但是输出图为空白。实时数据绘图的代码在URL https://github.com/TradingPal/react-native-highcharts中给出。在这段代码中，我只是将y替换为x-values的加速度计。

输出为：

您正在改变状态，这在React中是一个很大的禁忌。

状态应该始终是不变的，并且只能通过调用 penCalc(l,t,ind).. pen(l,ind) =e= (P_linha(l,ind) - lim_linhas(l))*10000;
penCalc2(l,ind).. pen(l,ind) $ (pen(l,int) =l= 0) = 0;
penCalc3(l,ind).. sum(t,pen(l,ind)) =e= sumPen(l,ind);
penCalc4(ind).. sum(l,sumPen(l,ind)) =e= sumPen2(ind);
来更改。如果您只是像示例中那样直接对其进行变异，则您的组件将不会更新。

我建议您进一步了解React中的component state（与React Native相同），然后您将意识到如何重构对penCalc(l,ind)$(P_linha(l,ind) - lim_linhas(l) > 0).. pen(l,ind) - lim_linhas(l) <0).... pen(l,int) =e= 0;
penCalc3(l,ind)) =e= sumPen2(ind);
等的调用。

setState应该是this.state.dataArr.push和render的纯函数。

由于我们看不到整个图片，因此只有render方法（以后请尝试发布完整的示例），我们只能在此处进行假设。

我可以想象，在您的其他一些代码中，您正在记录加速度计，并调用props来更改state。 （如果要通过常规分配直接更改它，请将其更改为setState调用。）然后，不要使用accelerometerData方法中的setState进行更改，而要使用{相同的dataArr呼叫。

p.s。这仍然不是一个完美的解决方案，因为它仍将使用derived state，但这是另一个要讨论的话题，而且要稍微高级一些。

您的代码将始终使用最新的加速度计数据，即，您始终绘制一个点（最新），因此该图似乎为空。

您应该做的是，在状态定义中将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()或类似名称使用的错误状态