Отправка данных API с помощью ссылки в Gatsby

Question

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

Вчера вечером здесь, в StackOverflow, мне сказали, что я могу отправлять данные API через ссылку, однако после просмотра некоторая документация Я не уверен, как реализовать конкретно то, что я описал.

Я не против переключения деталей. js на компонент класса, я пробовал это раньше и настраивал состояние, но у меня просто было множество различных ошибок.

индекс. 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: []

  }


  componentDidMount() {
    const API_KEY = '******************';
    axios.get(`https://cloud.iexapis.com/stable/stock/market/previous?token=${API_KEY}`)
      .then(res => {

        console.log(res)

        const topStocks = res.slice(1);
        this.setState({ topStocks })

      })
  }


  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/' state={{setState: this.state.symbol, query: `yourQuery`}}>{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 { Link } from "gatsby"
import axios from 'axios';
import React, { useEffect, useState } from 'react';
import Layout from '../components/layout';

const Details = props => {
  const [yourState, setYourState] = useState('');
  useEffect(() => {
    if (props.location.state.someState) {
      axios.get(`https://cloud.iexapis.com/stable/stock/XOM/quote?token=******************`)
        .then(res => setYourState(res))


    }
  }, []);

  return <Layout>
    <div>

      </div>
      </Layout>;
    };

export default Details;

Ошибки с моим текущим кодом:

D:\Web Development\React JS course\gatsby-site\src\pages\details.js
  7:5   error  React Hook "useEffect" is called in function "details" which is neither a React function component or a custom React Hook function  react-hooks/rules-of-hooks
  7:5   error  'useEffect' is not defined                                                                                                          no-undef
  8:12  error  Unexpected use of 'location'                                                                                                        no-restricted-globals
  9:65  error  'query' is not defined                                                                                                              no-undef

✖ 4 problems (4 errors, 0 warnings)

Answer 1

Есть несколько вещей, потому что у вас там есть немного странный компонент / страница.

1. Вы не импортируете useEffect на своей details.js странице, как показывает ошибка:

   7: 5 error 'useEffect' не определен

2. Ваше состояние, прошедшее через <Link> компонент, необходимо получить через props ( или деструктурируя props и получая location напрямую).

3. details.js - это функциональный компонент, в нем нет функции setState (или this). Вместо этого используйте ловушку useState. Параметр

4. query никогда не предоставляется этому компоненту. Как только вы решите основные проблемы, вы должны передать его через props.

   ошибка 'запрос' не определен

5. Ваши компоненты не camelCased.

Все ошибки должны быть исправлены с помощью:

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

const Details = props => {
  const [yourState, setYourState] = useState('');
  useEffect(() => {
    if (props.location.state.someState) {
      axios.get(`https://cloud.iexapis.com/stable/stock/${props.location.state.query}/quote?token=*****************`)
        .then(res => setYourState(res))
    }
  }, []);

  return <Layout>
    <div>
      {/*do stuff with your yourState. (i.e: console.log('hi!', yourState))*/}
        </div>
      </Layout>;
    };

export default Details;

Что касается второй и третьей точек:

1. const Details= props => {} равно const Details= ({ location }) => {}. Эта деструктуризация экономит вам один шаг и напрямую получает объект location вместо выполнения props.location в вашем условии.
2. Ваша функция setState не разрешена в функциональных компонентах, а не в компонентах класса. Выбор того или иного полностью зависит от вас, но вы должны знать об их «ограничениях» и «преимуществах». В этом случае нужно использовать хук useState. Как видите, он состоит из const [yourState, setYourState]. Второй элемент (setYourState) - это функция, которая будет использоваться для хранения значения yourState, поэтому ваш асинхронный запрос ax ios будет сохранен с использованием функции setYourState и получен через yourState. Конечно, вы можете назвать его как угодно sh.
3. Из вашего index.js обновите состояние и установите query: <Link to='/details/' state={{setState: this.state.symbol, query: `yourQuery`}}/>

Рекомендуемые значения :

• https://www.gatsbyjs.org/docs/gatsby-link/
• https://reactjs.org/docs/hooks-overview.html
• https://reactjs.org/docs/hooks-state.html

Если вам нужно подробное объяснение по любому вопросу, дайте мне знать, и я предоставлю его.