javascript - 在react native中相对于时间轴绘制移动加速度计的实时数据(plotting real time data of mobile's accelerometer against time axis in react native)

Question

I'm plotting real time data of accelerometer of mobile against time axis.

(我正在针对时间轴绘制手机加速度计的实时数据。)

x-axis will have time and y-axis will show values of accelerometer.

(x-axis将显示时间， y-axis将显示加速度计的值。)

I'm using react-native-highcharts for plotting data.

(我正在使用react-native-highcharts绘制数据。)

But the output graph is blank.

(但是输出图为空白。)

The code for live data plot is given at the URL https://github.com/TradingPal/react-native-highcharts .

(实时数据绘图的代码在URL https://github.com/TradingPal/react-native-highcharts中给出。)

In this code I'm just replacing y with x-values of accelerometer.

(在这段代码中，我只是将y替换为加速度计的x-values 。)

output is:

(输出为：)

  ask by Atia Riaz translate from so

Answer 1

You are mutating state, which is a big no-no in React.(您正在改变状态，这在React中是一个很大的禁忌。)

State should be immutable at all times , and only changed via a call to setState .

(状态应该始终是不可变的 ，只能通过调用setState来更改。)

If you are just directly mutating it like in your example, your component will not update.

(如果像示例中那样直接对其进行突变，则组件不会更新。)

I would advise you to learn more about component state in React (same in React Native) then you will realize how you can refactor your calls to this.state.dataArr.push and such.

(我建议您进一步了解React中的组件状态 （与React Native中的组件状态相同），然后您将意识到如何重构对this.state.dataArr.push等的调用。)

render should be a pure function of props and state .

(render应该是 props和state 的纯函数 。)

As we don't see the entire picture, only the render method (in the future please try to post a complete example) we can only make assumptions here.

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

I would imagine that in some of your other code you are recording the accelerometer and call setState to change accelerometerData .

(我可以想象在您的其他一些代码中，您正在记录加速度计，并调用setState更改accelerometerData 。)

(If you are directly changing it via a regular assignment, change it to a setState call.) Then instead of mutating dataArr in the render method, change dataArr using the same setState call.

(（如果要通过常规分配直接更改它，请将其更改为setState调用。）然后， dataArr在render方法中对dataArr进行突变，而dataArr使用相同的setState调用来更改dataArr 。)

ps This is still not a perfect solution as it would still be using derived state , but that is another - and slightly more advanced - topic to talk about.

(ps这仍然不是一个完美的解决方案，因为它仍将使用派生状态 ，但这是另一个要讨论的话题，并且要稍微高级一些。)