reactjs 如何将Axios中的两个数组合并为一个“数据源”数组，并将其作为数据传递到syncfusion SeriesDirective组件？

4uqofj5v 于 2023-02-03 发布在 React

关注(0)|答案(2)|浏览(109)

主要问题是当我console.log "datasource"数组时，它首先显示的是我想要填充的数组，即：

[
0:{ date: date, value: value },
1:{ date: date, value: value },
...
]

但是在第一个日志加载之后，它突然变成一个空数组[];
下面是我的代码：

import React, {useState, useEffect} from 'react'
import { ChartComponent, LineSeries, ColumnSeries, SeriesDirective, SeriesCollectionDirective, Inject } from '@syncfusion/ej2-react-charts'
import axios from 'axios'

const StablesTVLchart = () => {

  const [stables, setStables] = useState([])
  
  const dates = new Array;
  const totalCirculating = new Array;
  const totalPegged = new Array;
  const datasource = new Array;

  useEffect(() => {
    axios.get('https://stablecoins.llama.fi/stablecoincharts/all?stablecoin=1')
      .then(res => {
        
        setStables(res.data)
        
        // Populate dates array and totalCirculating array /
        for (var i = 0; i < stables.length; i++){
          dates.push(parseFloat(stables[i].date))
          totalCirculating.push(data[i].totalCirculatingUSD)
        }
        
         // Populate totalPegged array /
        for (var y = 0; y < totalCirculating.length; y++){
          totalPegged.push(totalCirculating[y].peggedUSD)
        }
        
         // Populate datasource array with date and totalPegged /
        for (var e = 0; e < datadate.length; e++){
          datasource.push({ date: dates[e], value: totalPegged[e] })
        }
      })
      .catch(err => {
        console.log(err)
      })
  }, []);

  console.log(datasource);

  const primaryxAxis = {visible: false }
  const primaryyAxis = { labelFormat: '${value}K', visible: false }
  const palette = ["skyblue"]
  
  return (
    <div className="w-full">
    <ChartComponent id="charts" primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} palettes=       {palette}>

      <Inject services={[ColumnSeries, LineSeries]} />
      
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={datasource} xName='date' yName='value' name='TVL'/>
      </SeriesCollectionDirective>
      
      </ChartComponent>
    </div>
  )
}

export default StablesTVLchart

我推测，我可能需要以某种方式使这个数据源数组成为一个状态数组？
如果任何人有任何线索或想法如何做到这一点，我会非常感激。

reactjs

来源：https://stackoverflow.com/questions/75336351/how-can-i-merge-two-arrays-from-axios-into-one-datasource-array-and-pass-it-as

2条答案

按热度按时间

vfwfrxfs1#

从您提供的代码中可以看出，您正在使用state来存储数据，但马上就要尝试使用它，我将提醒您，React可能会将多个setState（）调用批量处理到单个更新中，以提高性能。
同样为了提高代码的可读性，您可以使用如下代码：

useEffect(() => {
  axios.get('https://stablecoins.llama.fi/stablecoincharts/all?stablecoin=1')
    .then(res => {
      const stables = res.data;
      const dates = stables.map(item => parseFloat(item.date));
      const totalCirculating = stables.map(item => item.totalCirculatingUSD);
      const totalPegged = totalCirculating.map(item => item.peggedUSD);
      const datasource = totalPegged.map((value, index) => ({ date: dates[index], value }));
      setStables(datasource);
    })
    .catch(err => {
      console.log(err)
    });
}, []);

赞(0）回复(0）举报 2023-02-03

jjjwad0x2#

api返回一个数组。你把api的响应存储在一个你不使用的状态中。然后你把原始响应的部分数据存储在4个数组中（使用push）。您尝试使用其中一个变异数组（datasource），但只要重新渲染视图（因为setStables(res.data)）数组是用空数组重新创建的。另外，异步更新变量/常量和改变数组不会导致重新呈现，即使它会做出React，也不会检测到变化，也不会改变视图。
解决方案：
1.使用Array.map()基于api的响应数组创建一个新数组
1.将Map结果存储到州中，并在视图中使用该州
示例：

const StablesTVLchart = () => {
  const [datasource, setDatasource] = useState([])

  useEffect(() => {
    axios.get('https://stablecoins.llama.fi/stablecoincharts/all?stablecoin=1')
      .then(({ data }) => {
        setDatasource(data.map(({ date, totalCirculatingUSD }) => ({
          date: parseFloat(date),
          value: totalCirculatingUSD.peggedUSD
        })))
      })
      .catch(err => {
        console.log(err)
      })
  }, []);

  console.log(datasource);
}

赞(0）回复(0）举报 2023-02-03

我来回答

reactjs 如何将Axios中的两个数组合并为一个“数据源”数组，并将其作为数据传递到syncfusion SeriesDirective组件？

2条答案

相关问题

热门标签

最新问答