Reactjs 发送'；已发送'；盖茨比中从页面到组件的数据

我的index.js页面中有状态数据，这些数据通过内置在gatsby中的链接组件发送到my details.js页面。从my details.js页面，我试图将数据发送到我的组件ChartData.js

在details.js中，我可以使用

{props.location.state.x}

访问我的信息。现在我需要将相同的数据发送到我的组件，我所做的是将Stock（Stock是ChartData.js中的类名）放入comont，并将'symbol'设置为与我引用数据的方式相同的方式，如下所示：

{}

现在在ChartData/.js下，当我尝试引用symbol时，会出现错误“symbol未定义”。我不确定是我弄乱了传递它的语法，还是你不能这样做

index.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"
//import Stock from "../components/ChartData"
//import Characters from "../components/ChartData"

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 }) 

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

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

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

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


          })
      }
  }



  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,
                        open: this.state.open,
                        high: this.state.high,
                        low: this.state.low,
                        volume: this.state.volume,
                        symbol: this.state.symbol

                        }}>
                          {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>
      )
  }
}

从“React”导入React
从“盖茨比”导入{Link}
从“axios”导入axios
导入“./css/style.css”
从“./组件/布局”导入布局
从“道具类型”导入{symbol}
//从“./components/ChartData”导入库存
//从“./components/ChartData”导入字符
导出默认类索引扩展React.Component{
状态={
公司名称：“，
上一次关闭：“，
市值：“，
更改：“，
符号：“，
顶杆：[]，
Yearweekhigh:“，
年周刊：“，
平均总体积：“”，
手术：“，
}    
clickHandler=（事件）=>{
如果（event.keyCode===13）{
const query=event.target.value；
常量API_KEY='********************'；
axios.get(`https://cloud.iexapis.com/stable/stock/${query}/quote？标记=${API\U键}`）
。然后（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=分辨率数据['week52高]；
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}）
const open=res.data['open']；
this.setState（{open}）
常数高=分辨率数据[‘高’]；
this.setState（{high}）
常数低=分辨率数据[‘低’]；
this.setState（{low}）
const volume=res.data['volume']；
this.setState（{volume}）
})
}
}
render（）{
返回(
this.clickHandler（事件）}/>
股票代码
市值
前收盘
{this.state.symbol}
{this.state.marketCap}
{this.state.previousClose}
{
this.state.topStocks.length&&this.state.topStocks.map（stock=>(
{stock.symbol}
))
}
)
}
}

details.js

//import { Link } from "gatsby"
import axios from 'axios';
import React, { useEffect, useState } from 'react';
import Layout from '../components/layout';
import "../css/style.css"
import Stock from "../components/ChartData"

const Details = props => {
  const [yourState, setYourState] = useState('');
  useEffect(() => {

  }, []);

  return  <Layout>
    <div>
    <h1 class="details-company-name">{props.location.state.companyName}</h1>
    <div class = "details-div">
      <div class="details-div-1">
        <p>Open <h2>{props.location.state.open}</h2> </p>
        <p>High <h2>{props.location.state.high}</h2> </p>
        <p>Low <h2>{props.location.state.low}</h2> </p>
        <p>52 WK HIGH <h2>{props.location.state.Yearweekhigh}</h2> </p>
        <p>52 WK LOW <h2>{props.location.state.Yearweeklow}</h2> </p>
        <p>{props.location.state.symbol}</p>
      </div>
      <div class="details-div-2">
        <p>VOLUME <h2>{props.location.state.volume}</h2></p>
        <p>AVG VOL <h2>{props.location.state.avgTotalVolume}</h2> </p>
        <p>MKT CAP <h2>{props.location.state.marketCap}</h2></p>
        <p>P/E RATIO <h2>{props.location.state.peRatio}</h2></p>
        <p>DIV/YIELD</p>
      </div>
    </div>
    </div>
    <Stock symbol={props.location.state.symbol}/>
      </Layout>;
    };

export default Details;

//从“盖茨比”导入{Link}
从“axios”导入axios；
从“React”导入React，{useffect，useState}；
从“../components/Layout”导入布局；
导入“./css/style.css”
从“./components/ChartData”导入库存
const Details=props=>{
const[yourState，setYourState]=useState（“”）；
useffect（（）=>{
}, []);
返回
{props.location.state.companyName}
打开{props.location.state.Open}

High{props.location.state.High}

Low{props.location.state.Low}

52周高{props.location.state.Yearweekhigh}

52周低{props.location.state.Yearweeklow}

{props.location.state.symbol}

卷{props.location.state.VOLUME}

AVG VOL{props.location.state.avgTotalVolume}

MKT CAP{props.location.state.marketCap}

市盈率{props.location.state.peractio}

部门/收益

;
};
导出默认详细信息；

ChartData.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/${symbol}/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

从“React”导入React
从“react plotly.js”导入绘图
类Stock.Component{
建造师（道具）{
超级（道具）；
此.state={
StockChartX值：[]，
股票图表价值：[]，
};
}
componentDidMount（）{
this.fetchStock（）；
}
fetchStock（）{
const pointerToThis=这个；
常量API_KEY='******************'；
让API_调用=`https://cloud.iexapis.com/stable/${symbol}/aapl/chart/5y？标记=${API_KEY}`；
让stockChartXValuesFunction=[]；
让stockChartYValuesFunction=[]；
获取（API_调用）
.然后（功能（响应）{
返回response.json（）；
})
.then（功能（数据）{
用于（数据中的var x）{
StockChartX值功能推送（x）；
stockChartYValuesFunction.push(
数据[x]['uOpen']
);
指针tothis.setState({
stockChartXValues:stockChartXValues函数，
stockChartYValues:stockChartYValues函数，
});
}
})
}
render（）{
雷图
let API_CALL = 
`https://cloud.iexapis.com/stable/${this.props.symbol}/aapl/chart/5ytoken=${API_KEY}`;

 componentDidMount() {
  if(props.symbol) this.fetchStock();
 }

constructor(props) {
    super(props);
    this.state = {}; // remove if not needed
}