首頁猿問在 Gatsby 中使用 Link...

在 Gatsby 中使用 Link 發(fā)送 API 數(shù)據(jù)

JavaScript

呼啦一陣風(fēng) 2022-10-08 15:14:49

我正在使用 Gatsby 和股票市場(chǎng) API 制作股票投資組合項(xiàng)目。目前，當(dāng)您按股票代碼搜索時(shí)，它會(huì)在表格中返回股票代碼、市值和上一個(gè)收盤價(jià)。當(dāng)您單擊返回的股票代碼時(shí)，它會(huì)將您帶到另一個(gè)頁面。在下一頁上，我希望能夠訪問相同的 API 搜索，以顯示股票的更多詳細(xì)信息。昨晚在 StackOverflow 上有人告訴我，我可以通過 Link 發(fā)送 API 數(shù)據(jù)，但是在查看了一些文檔之后，我不確定如何具體實(shí)現(xiàn)我所描述的內(nèi)容。我不介意將 details.js 切換到類組件，我之前嘗試過并設(shè)置了狀態(tài)，但我遇到了很多不同的錯(cuò)誤。index.jsimport 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 }) }) } }

查看完整描述

1 回答

LEATH

TA貢獻(xiàn)1936條經(jīng)驗(yàn) 獲得超7個(gè)贊

有幾件事，因?yàn)槟抢镉幸恍┢婀值慕M件/頁面。

您沒有useEffect在details.js頁面中導(dǎo)入錯(cuò)誤顯示：
7:5 錯(cuò)誤“useEffect”未定義
您通過<Link>組件傳遞的狀態(tài)需要通過props（或解構(gòu)props并location直接獲?。z索。
details.js是一個(gè)功能組件，您沒有setState(nor this) 功能。改用useState鉤子。
query永遠(yuǎn)不會(huì)向該組件提供參數(shù)。一旦你解決了主要問題，你應(yīng)該通過props.
錯(cuò)誤“查詢”未定義
您的組件不是駝峰式的。

所有錯(cuò)誤都應(yīng)通過以下方式修復(fù)：

//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;

關(guān)于第二點(diǎn)和第三點(diǎn)：

const Details= props => {}等于const Details= ({ location }) => {}。這種解構(gòu)為您節(jié)省了一步并直接獲取location對(duì)象，而不是props.location在您的條件下進(jìn)行。
setState功能組件而不是類組件中不允許使用您的函數(shù)。這完全取決于您選擇一個(gè)或另一個(gè)，但您需要了解它們的“限制”和“好處”。在這種情況下，您需要使用useState鉤子。如您所見，它由const [yourState, setYourState]. 第二個(gè)元素 ( setYourState) 是用于存儲(chǔ) 的值的函數(shù)yourState，因此，您的 axios 異步請(qǐng)求將使用setYourState函數(shù)存儲(chǔ)并通過檢索yourState。當(dāng)然，您可以隨意命名。
從您的index.js，更新狀態(tài)并設(shè)置query：<Link to='/details/' state={{setState: this.state.symbol, query: `yourQuery`}}/>