Javascript 将单击的链接另存为查询以搜索API（React，Gatsby）

我正在使用盖茨比和股票市场API来制作股票投资组合应用程序。目前，我已将其设置为，当您通过股票代码搜索股票时，它将返回股票代码、市值和上一次收盘。我还这样做，当你点击股票代码时，它会带你进入另一个盖茨比页面。在下一页中，我希望它能将您带到一个包含更多股票数据的表格中

我需要的功能是搜索在新选项卡中单击的股票代码，以便设置更详细的表格

index.js

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

export default class index extends React.Component {
  state = {
      companyName: "",
      previousClose: "",
      marketCap: "",
      change: "",
      symbol: ""

  }


  componentDidMount() {
    const API_KEY = '************************';
    axios.get(`https://cloud.iexapis.com/stable/stock/XOM/quote?token=${API_KEY}`)
      .then(res => {
        const symbol = res.data['symbol'];
        this.setState({ symbol })

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

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

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



  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">{this.state.symbol}</Link></td>
                      <td>{this.state.marketCap}</td>
                      <td>{this.state.previousClose}</td>
                    </tr>
                  </table>
              </div>
          </Layout>
      )
  }
}

从“React”导入React
从“盖茨比”导入{Link}
从“axios”导入axios
导入“./css/style.css”
从“./组件/布局”导入布局
导出默认类索引扩展React.Component{
状态={
公司名称：“，
上一次关闭：“，
市值：“，
更改：“，
符号：“
}
componentDidMount（）{
常量API_KEY='**************************'；
axios.get(`https://cloud.iexapis.com/stable/stock/XOM/quote?token=${API_KEY}`）
。然后（res=>{
const symbol=res.data['symbol']；
this.setState（{symbol}）
const previousClose=res.data['previousClose']；
this.setState（{previousClose}）
const marketCap=res.data['marketCap']；
this.setState（{marketCap}）
})
}
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}）
})
}
}
render（）{
返回(
this.clickHandler（事件）}/>
股票代码
市值
前收盘
{this.state.symbol}
{this.state.marketCap}
{this.state.previousClose}
)
}
}

details.js

import React from 'react'
import Layout from '../components/layout'

export default function details() {
    return (
        <Layout>
        <div>

        </div>
        </Layout>
    )
}

从“React”导入React
从“../components/Layout”导入布局
导出默认函数详细信息（）{
返回(
)
}

您可以使用

状态

对象通过

组件传递数据，如所示：

---

谢谢你。但是，我在设置它时遇到困难。我收到过多的错误，不确定如何设置。编辑：特别是你评论的地方，我试图添加状态并像另一个一样设置它，但它说状态没有定义，我意识到我必须使用类组件，但我需要更改useEffect，我想我可能做得不对。如果你使用类组件，你必须使用

componentDidMount

而不是

useEffect

钩但是，在您提供的代码片段中，有一个功能组件。

<td><Link to="/details" state=={{someState:'hello'}}>{this.state.symbol}</Link</td>

export default function details() {
    useEffect(()=>{
        if(location.state.someState){
            //your axios async query
        }
    })
    return (
        <Layout>
        <div>

        </div>
        </Layout>
    )
}