如何使用 api 获取 SQL 数据并在 react-native-svg 图表中使用该数据？我有一个我想用来获取数据和显示的 API答案

【问题标题】：How to fetch SQL data using api and use that data in react-native-svg charts? I am having an API that I want to use to fetch data and display如何使用 api 获取 SQL 数据并在 react-native-svg 图表中使用该数据？我有一个我想用来获取数据和显示的 API
【发布时间】：2021-04-21 16:36:34
【问题描述】：

我正在使用 api 获取一些数据。在该 api 中有执行的 SQL 查询。我有 api 将用于获取数据或执行这些查询。我想知道如何将图表的静态数据替换为将从 api 获取的动态数据。

这是我的TabDashboardDetail.js，我根据 api 数据获取所有图表的标题：

import React from 'react';
import DefaultScrollView from '../components/default/DefaultScrollView';
import ChartView from '../components/default/ChartView';
import CogniAreaChart from '../components/CogniAreaChart';
import { areaChartData } from '../chartData';

const TabDashboardDetail = ({ navigation, route }) => {
  const tabsConfig = route.params.tabsConfig;
  return (
    <DefaultScrollView>
      {tabsConfig.components.map((comp, index) => {
        return (
          <ChartView key={index} title={comp.name}>
            <CogniAreaChart areaChartData={areaChartData} height={200} />
          </ChartView>
        );
      })}
    </DefaultScrollView>
  );
};

export default TabDashboardDetail;

这是我的CogniAreaChart.js，它是当前正在渲染的图表文件：

/* eslint-disable react-native/no-inline-styles */
import React from 'react';
import { View } from 'react-native';
import { AreaChart, YAxis, XAxis } from 'react-native-svg-charts';
import * as shape from 'd3-shape';

const CogniAreaChart = ({ areaChartData, visibility, ...props }) => {
  const xAxis = areaChartData.message.map((item) => item[Object.keys(item)[0]]);
  const areaChartY1 = areaChartData.message.map(
    (item) => item[Object.keys(item)[1]],
  );

  return (
    <View
      style={{
        height: props.height,
        flexDirection: 'row',
      }}>
      <YAxis
        data={areaChartY1}
        contentInset={{ marginBottom: 20 }}
        svg={{
          fill: 'grey',
          fontSize: 12,
        }}
      />
      <View style={{ flex: 1 }}>
        <AreaChart
          style={{ flex: 1 }}
          data={areaChartY1}
          contentInset={{ top: 20, bottom: 20 }}
          curve={shape.curveNatural}
          svg={{ fill: 'rgba(134, 65, 244, 0.8)' }}
        />
        <XAxis
          style={{ height: 20 }}
          data={areaChartY1}
          formatLabel={(value, index) => xAxis[index]}
          contentInset={{ left: 30, right: 30 }}
          svg={{
            fill: 'grey',
            fontSize: 12,
            rotation: 35,
            originY: 5,
            y: 15,
          }}
        />
      </View>
    </View>
  );
};

export default CogniAreaChart;

这是CogniAreaChart.js中当前使用的areachartData：

export const areaChartData = {
  message: [
    {
      year: '2018',
      quantity: 241.01956823922,
      sales: 74834.12976954,
    },
    {
      year: '2019',
      quantity: 288.57247706422,
      sales: 80022.3050176429,
    },
  ],
  status: 'success',
};

如果有人建议，我将使用示例替换 API。

【问题讨论】：

标签： javascript sql reactjs react-native svg

【解决方案1】：

为数据分配一个状态变量，并在组件挂载时调用 API 并将其保存到状态变量

snack example with dummy data

【讨论】：

它帮助了我，谢谢！
@ManishRana 很高兴它帮助了你