reactjs 如何在React中从API get请求中提取数据

j8ag8udp 于 2023-05-22 发布在 React

关注(0)|答案(1)|浏览(201)

我正在用react开发一个API，它返回一个数组[2]，里面有另一个数组[11]，里面有11个数组，里面有我需要的数据，还有一些我不需要获取。我使用axios发出get请求，我可以用console.log打印数据，我得到200，但我需要提取时间和平均值的值，并将该数据传递到图表中，有人可以帮助我吗？我有点卡住了
我试着用Map的方法，但我没有工作。
这是我尝试使用的代码：``` import React，{ useEffect，useState } from 'react';从'axios'导入axios; import { Line } from 'react-chartjs-2';

const URLAPI = 'apiurl'
  try {
  const response = await axios.get(URLAPI);
  const data = response.data.data[2][0].map(item => item.mean);
  setChartData(data);
  } catch (error) {
  console.log(error);
  }
  };

  return (
  <div>
  <h1>Line Chart</h1>
  <Line
    data={{
      labels: Array.from(Array(chartData.length).keys()), // Use index as 
  labels
      datasets: [
        {
          data: chartData,
          label: 'Mean Values',
          borderColor: 'blue',
          fill: false,
         },
       ],
     }}
     />
    </div>
  );
  }

  export default LineChartComponent;

reactjs

来源：https://stackoverflow.com/questions/76281923/how-to-extract-data-from-an-api-get-request-in-react-with-axios

1条答案

按热度按时间

62lalag41#

我对你的代码做了一些修改。使用Array.prototype.flat（）方法将嵌套数组展平，这样访问内部数组就更容易了。然后，您可以使用map（）方法从每个内部数组中提取时间和平均值。

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { Line } from 'react-chartjs-2';

const LineChartComponent = () => {
  const [chartData, setChartData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get(URLAPI);
        const nestedArray = response.data.data[2][0];
        const flattenedArray = nestedArray.flat(); // Flatten the nested array
        const data = flattenedArray.map(item => ({
          time: item.time,
          mean: item.mean
        }));
        setChartData(data);
      } catch (error) {
        console.log(error);
      }
    };

    fetchData();
  }, []); // Empty dependency array to run the effect only once

  return (
    <div>
      <h1>Line Chart</h1>
      <Line
        data={{
          labels: chartData.map(item => item.time), // Use time values as labels
          datasets: [
            {
              data: chartData.map(item => item.mean), // Use mean values as data
              label: 'Mean Values',
              borderColor: 'blue',
              fill: false,
            },
          ],
        }}
      />
    </div>
  );
};

export default LineChartComponent;

赞(0）回复(0）举报 2023-05-22

我来回答

reactjs 如何在React中从API get请求中提取数据

1条答案

相关问题

热门标签

最新问答