我正在尝试使用胜利本机库绘制胜利折线图。但总是坚持例外。我尝试了 3 天之久，但仍然无法解决此问题。我不知道出了什么问题。
import React, {useEffect} from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {getSavedDataStream, getSavedDataStreamsList} from "../components/database-connection"
import {
VictoryAxis,
VictoryBrushContainer,
VictoryChart,
VictoryLegend,
VictoryLine,
VictoryZoomContainer
} from "victory-native";
export default function SavedStreamScreen(props) {
let styles = StyleSheet.create({
view: {
margin: 0,
padding: 5,
},
chart: {
margin: 0,
padding: 2,
},
});
let rparams = props.route.params;
console.log("savedStreamScreen: ", rparams);
if (rparams == null) {
return (<View><Text>No parameters! O_o</Text></View>);
}
if (rparams.type !== "accel") {
return (<View><Text>Sorry, can not display this!</Text></View>);
}
// DO NOT COPY-PASTE THIS!!!
// {"AcX": 1, "AcY": 2, "AcZ": 3, "Tmp": 4.1, "GyX": 5, "GyY": 6, "GyZ": 7}
const accel_const = [
["AcX", "#ff0"], ["AcY", "#f77"], ["AcZ", "#f0f"],
["GyX", "#0f0"], ["GyY", "#077"], ["GyZ", "#00f"],
["Tmp", "#f00"]
]
// Array [
// "{\"AcX\":1,\"AcY\":2,\"AcZ\":3,\"Tmp\":4.1,\"GyX\":5,\"GyY\":6,\"GyZ\":7}",
// undefined,
// ],
let [data, setData] = React.useState([]);
getSavedDataStream(setData, rparams.stream_id, rparams.type);
return (
<View style={styles.view}>
<VictoryChart
style={styles.chart}
scale={{x: "time"}}
containerComponent={
<VictoryZoomContainer responsive={true} zoomDimension="x"/>
}
>
<>{
accel_const.map(sens => (
<VictoryLine
style={{
data: {stroke: sens[1]}
}}
data={data.map(function (dat) {
return {x: dat[0], y: dat[1][sens[0]]};
})}
/>
))
}</>
<VictoryLegend
width={200}
orientation="horizontal"
gutter={10}
style={{border: {stroke: "black"}, title: {fontSize: 20}}}
data={accel_const.map(function (el) {
return {name: el[0], symbol: {fill: el[1]}};
})}
/>
</VictoryChart>
</View>
);
//}
}
我得到的例外如下：
TypeError: Array.prototype.map 要求 |this| 不能为 null 或未定义
此错误位于： VictoryLine (at savedStreamScreen.js:64) RNSVGGroup (at G.tsx:33) in G (at Svg.tsx:202) in RNSVGSvgView (at Svg.tsx:197) in Svg (at victory-container.js:136) 在 RCTView (在 View.js:34) 在 VictoryZoomContainer (在 savedStreamScreen.js:59) 在 VictorySharedEvents (由 VictoryChart 创建) 在 VictoryChart (在 savedStreamScreen.js:55) 在 RCTView (在 View.js:34) 在 View (在 savedStreamScreen.js:54) 在 SavedStreamScreen (在 SceneView.tsx:126) 在 StaticContainer 在 StaticContainer (在 SceneView.tsx:119) 在EnsureSingleNavigator (at SceneView.tsx:118) 在 SceneView (at useDescriptors.tsx:210) 在 RCTView (at View.js:34) 在 View (at Screen.tsx:63) 在 RCTView (at View.js:34) 在在屏幕（在 DrawerView.tsx：246) 在 RNSScreen (at createAnimatedComponent.js:165) 在 AnimatedComponent (at createAnimatedComponent.js:215) 在 ForwardRef(AnimatedComponentWrapper) (at src/index.native.tsx:147) 在 Screen (at ScreenFallback.tsx:37) 在RNSScreenContainer (at src/index.native.tsx:186) 中的 MaybeScreen (at DrawerView.tsx:240) ScreenContainer (at ScreenFallback.tsx:28) 中的 MaybeScreenContainer (at DrawerView.tsx:206) RCTView (at View.js) :34) 在视图中 (在 Drawer.tsx:561) 在 RCTView (在 View.js:34) 在视图 (在 createAnimatedComponent.js:448) 在 AnimatedComponent(View) (在 createAnimatedComponent.js:459) 在 ForwardRef(AnimatedComponentWrapper ) (at Drawer.tsx:553) 在 RCTView (at View.js:34) 在 View (at createAnimatedComponent.js:448) 在 AnimatedComponent(View) (at createAnimatedComponent.js:459) 在 ForwardRef(AnimatedComponentWrapper) (at Drawer .tsx：541) 在 PanGestureHandler (在 GestureHandlerNative.tsx:14) 在 PanGestureHandler (在 Drawer.tsx:532) 在 DrawerView (在 DrawerView.tsx:273) 在 DrawerViewBase (在 DrawerView.tsx:317) 在 GestureHandlerRootView (在 GestureHandlerRootView.android。 tsx:26) 在 GestureHandlerRootView (at DrawerView.tsx:316) 在 RNCSafeAreaProvider (at SafeAreaContext.tsx:76) 在 SafeAreaProvider (at SafeAreaProviderCompat.tsx:46) 在 SafeAreaProviderCompat (at DrawerView.tsx:315) 在 DrawerView (at createDrawerNavigator. tsx:126) 在 Unknown (at createDrawerNavigator.tsx:125) 在 DrawerNavigator (在 App.js:16) 在 EnsureSingleNavigator (在 BaseNavigationContainer.tsx:430) 在 ForwardRef(BaseNavigationContainer) (在 NavigationContainer.tsx:132) 在 ThemeProvider (在 NavigationContainer.tsx:131) 在 ForwardRef(NavigationContainerInner) 中（在 App.js 中：15) 在 App (由 ExpoRoot 创建) 在 ExpoRoot (在 renderApplication.js:45) 在 RCTView (在 View.js:34) 在 View (在 AppContainer.js:106) 在 RCTView (在 View.js:34) 在在 node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 在 node_modules/react-native/Libraries/Core/ 的 reportException 中的 AppContainer（在 renderApplication.js:39）中查看（在 AppContainer.js:132） ExceptionsManager.js:171:19 in node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError in node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_039) 在 node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 在 node_modules/react-native/Libraries/Core/ExceptionsManager.js:171:19 在 node_modules/react-native/Libraries 的 handleException 中/Core/setUpErrorHandling.js:24:6 in handleError at node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_039) 在 node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 在 node_modules/react-native/Libraries/Core/ExceptionsManager.js:171:19 在 node_modules/react-native/Libraries 的 handleException 中/Core/setUpErrorHandling.js:24:6 in handleError at node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_0
警告：无法对未安装的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要解决此问题，请在 useEffect 清理函数中取消所有订阅和异步任务。在 tx.executeSql$argument_2 中的 components/database-connection.js:27:16 在 node_modules/@expo/websql/lib/websql/WebSQLTransaction.js:70:8 在 self._websqlDatabase._db.exec$argument_2 在 node_modules/ Expo-sqlite/build/SQLite.js:17:20 在 ExponentSQLite.exec.then$argument_0