javascript - 在本机反应中根据时间轴绘制手机加速度计的实时数据

Question

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

输出是：

标签： javascriptreact-nativeaccelerometer

Answer 1

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

状态应该在任何时候都是不可变的，并且只能通过调用setState. 如果您只是像示例中那样直接对其进行变异，则您的组件将不会更新。

我建议您了解更多有关React 中组件状态的信息（在 React Native 中也是如此），然后您将意识到如何重构您的调用this.state.dataArr.push等。

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

由于我们没有看到全貌，只有渲染方法（以后请尽量贴出完整的例子）我们只能在这里做假设。

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

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