我的代码中是否有任何错误,我正在尝试在 React 本机图表工具包上获取 API



我正在尝试使用async await获取react native chart kit上的json API,但我的代码给出了错误地图未定义..

TypeError: Cannot read properties of undefined (reading 'map')

这里我的代码react native android

import React, { useState, useEffect } from 'react';
import { View } from 'react-native';
import { LineChart } from 'react-native-chart-kit';
const Screen1 = () => {
const [data, setData] = useState([]);
useEffect(() => {
const fetchData = async () => {
const response = await fetch('https://script.googleusercontent.com/macros/echo?user_content_key=4CmBJH-t4l8ttf8ZbxbCbmzvEbJH3Ia_ja0IZluqEYcfMGQbXbN4cQ4iZ42wKRZZIgmJqtzTWLTa0xF1lhksn1SA7CZrB2vTm5_BxDlH2jW0nuo2oDemN9CCS2h10ox_1xSncGQajx_ryfhECjZEnFUk1oS11HODC4kgVFcklP7bly7smBobZeLSs9YBkifDWjjSjPFy1arSlO4XMWHwy6rFUIhT1qAKQGwcfvSKEfWhfhmpWtCcBNz9Jw9Md8uu&lib=MwHLfleKugAQlVo-Cygvk5qOcTyEVBS6e');
const result = await response.json();
setData(response.data);
};
fetchData();
}, []);
const chartData = {
labels: data.map(item => item.put),
datasets: [
{
data: data.map(item => item.call),
},
],
};
return (
<View>
<LineChart
data={chartData}
width={320} // from react-native
height={220}
yAxisLabel="$"
yAxisSuffix="k"
yAxisInterval={1} // optional, defaults to 1
chartConfig={{
backgroundColor: '#e26a00',
backgroundGradientFrom: '#fb8c00',
backgroundGradientTo: '#ffa726',
decimalPlaces: 2, // optional, defaults to 2dp
color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
style: {
borderRadius: 16,
},
propsForDots: {
r: '6',
strokeWidth: '2',
stroke: '#ffa726',
},
}}
bezier
style={{
marginVertical: 8,
borderRadius: 16,
}}
/>
</View>
);
};
export default Screen1;

谁能告诉我我错在哪里

我认为这是因为你正在设置响应。数据setData(response.data);而不是setData(result.data);但是当我查看响应数据时它应该是这样的setData(result.AlgoData)

最新更新