Сохранить нажатую ссылку как запрос для поиска API (React, Gatsby)

Question

Я использую Gatsby и API фондовой биржи для создания приложения для портфеля акций. в настоящее время я настроил его таким образом, чтобы при поиске акции по ее тикеру он возвращал тикер-символ акции, рыночную капитализацию и предыдущее закрытие. Я также сделал так, чтобы при нажатии на тикер-символ вы переходили на другую страницу Gatsby. На этой следующей странице я хочу, чтобы он привел вас к таблице с дополнительными данными об акциях.

Мне нужна функция для поиска тикера, выбранного на новой вкладке, чтобы я мог установить см. более подробную таблицу.

индекс. 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>
      )
  }
}

подробности. js

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

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

        </div>
        </Layout>
    )
}

Answer 1

Вы можете передавать данные через компонент <Link> с помощью объекта state, как показано в документации API ссылок Gatsby :

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

Затем в вашем details.js вы получите в качестве пропа (хранится в location.state.someState) следующее:

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

        </div>
        </Layout>
    )
}