我正在尝试在我的股票市场项目中设置图表。我试图显示在 Gatsby 中点击的股票图表。

目前，我可以通过在代码中手动输入股票名称来显示任何股票的股票图表。由于const query = event.target.valuein ，我想在 api 调用的 url 内用 ${query} 替换股票名称index.js。因此，搜索项将被保存为查询，我需要在我的其他文件访问同一个变量chartData.js，这样我可以从改变我的API调用let API_CALL = `https://cloud.iexapis.com/stable/stock/aapl/chart/5y?token=${API_KEY}`; 成let API_CALL = `https://cloud.iexapis.com/stable/stock/${query}/chart/5y?token=${API_KEY}`;这样，我将不得不取其项搜索的访问，并能够把它变成一个图表。

我想也许我可以使用 state 来做到这一点，比如通过query: this.state.value或将查询移动到状态query: {this.state.value}。这两个都返回了错误，所以我认为这行不通（或者至少我做错了）。

索引.js

import React from "react"
import { Link } from "gatsby"
import axios from "axios"
import "../css/style.css"
import Layout from "../components/layout"
import { symbol } from "prop-types"

export default class index extends React.Component {
  state = {
      companyName: "",
      previousClose: "",
      marketCap: "",
      change: "",
      symbol: "",
      topStocks: [],
      Yearweekhigh: "",
      Yearweeklow: "",
      avgTotalVolume: "",
      peRatio: "",
      

  }
     
  

  clickHandler = (event) => {
          if (event.keyCode === 13) {
          const query = event.target.value;
          const API_KEY = '******************';
      axios.get(`https://cloud.iexapis.com/stable/stock/${query}/quote?token=${API_KEY}`)
          .then(res => {
              const companyName = res.data['companyName'];
              this.setState({ companyName })

              const previousClose = res.data['previousClose'];
              this.setState({ previousClose })

              const marketCap = res.data['marketCap'];
              this.setState({ marketCap })

              const change = res.data['change'];
              this.setState({ change })

              const symbol = res.data['symbol'];
              this.setState({ symbol })

              const Yearweekhigh = res.data['week52High'];
              this.setState({ Yearweekhigh })

              const Yearweeklow = res.data['week52Low'];
              this.setState({ Yearweeklow })

              const avgTotalVolume = res.data['avgTotalVolume'];
              this.setState({ avgTotalVolume })

              const peRatio = res.data['peRatio'];
              this.setState({ peRatio }) 


          })
      }
  }



  render() {
      return (
          <Layout>
              <div class = "main-div">
                  <input type="search" class="main-search" onKeyDown={event => this.clickHandler(event)}/>
                  <table>
                    <tr>
                      <th>Ticker-Symbol</th>
                      <th>Market Cap</th>
                      <th>Previous Close</th>
                    </tr>
                    <tr>
                    <td>
                      <Link to='/details/' state={{

                        setState: this.state.symbol, 
                        companyName: this.state.companyName, 
                        previousClose: this.state.previousClose,
                        marketCap: this.state.marketCap,
                        change: this.state.change,
                        Yearweekhigh: this.state.Yearweekhigh,
                        Yearweeklow: this.state.Yearweeklow,
                        avgTotalVolume: this.state.avgTotalVolume,
                        peRatio: this.state.peRatio

                        }}>
                          {this.state.symbol}</Link>


                        </td>
                      <td>{this.state.marketCap}</td>
                      <td>{this.state.previousClose}</td>
                    </tr>
                  </table>
              </div>
              <div>
                {
                  this.state.topStocks.length && this.state.topStocks.map(stock => (
                  <h1>{stock.symbol}</h1>
                  ))
                }
              </div>
          </Layout>
      )
  }
}

图表数据.js

import React from 'react'
import Plot from 'react-plotly.js'

class Stock extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            stockChartXValues: [],
            stockChartYValues: [],
        };
    }

    componentDidMount() {
        this.fetchStock();
    }

    fetchStock() {
        const pointerToThis = this;
        const API_KEY = '**************************';
        let API_CALL = `https://cloud.iexapis.com/stable/stock/aapl/chart/5y?token=${API_KEY}`;
        let stockChartXValuesFunction = [];
        let stockChartYValuesFunction = [];

        fetch(API_CALL)
        .then(function (response) {
            return response.json();
        })
        .then(function (data) {

            for (var x in data) {
                stockChartXValuesFunction.push(x);
                stockChartYValuesFunction.push(
                    data[x]['uOpen']
                );

                pointerToThis.setState({
                    stockChartXValues: stockChartXValuesFunction,
                    stockChartYValues: stockChartYValuesFunction,
                });
            }


        })
    }


    render() {
        return (
            <div>
                <Plot
                data={[
                    {
                        x: this.state.stockChartXValues,
                        y: this.state.stockChartYValues,
                        type: "scatter",
                        mode: "lines+markers",
                        marker: {color: "red"}
                    },
                ]}
                layout={{ width: 720, height: 440, title: "A Fancy Plot"}}
                />
            </div>
        )
    }
}

export default Stock