javascript - 在 React 中获取数据

Question

我正在尝试绘制一个从 Web Api 获取数据的图表。我可以看到一些数据正在通过，但我仍然无法绘制图表。如果我做错了什么，请告诉我。

import React, { Component } from 'react';
import './main.styles.scss';
import { createChart } from 'lightweight-charts';

async function getData() {
  const response = await fetch(`http://localhost:3500/stock/app/RY`);
  const data = await response.json();
  return data.webApiData;
}

class Main extends Component {
  ref = React.createRef();

  componentDidMount() {
    const chart = createChart(this.ref.current, {
      width: 1400,
      height: 550,
      timeScale: {
        timeVisible: true,
        secondsVisible: false,
      },
    });

    const candleSeries = chart.addCandlestickSeries();

    const chartData = getData().then((data) => {
      console.log(data);
      candleSeries.setData(data);
    });
  }

  render() {
    return (
      <div className="main">
        <div className="trading">
          <div className="box one">1</div>
          <div className="box two" ref={this.ref}></div>
        </div>
      </div>
    );
  }
}

export default Main;

这是console.log上的数据

这是我得到的错误

Answer 1

这是因为 time 的格式属性的样式不正确。
它应该在 YYYY-MM-DD风格。
例如，您可以尝试

const chartData = getData().then((data) => {
   console.log(data);
   candleSeries.setData(data.map((sD) => {
       return {time: `${sD.time.year}-${sD.month > 9 ? sD.month : `0${sD.time.month}`}-${sD.day > 9 ? sD.day : `0${sD.day}`}`, ...sD}
   }));
});