在 Gatsby 中使用 Link 发送 API 数据

Question

我正在使用 Gatsby 和股票市场 API 制作股票投资组合项目。目前，当您按股票代码搜索时，它会在表格中返回股票代码、市值和上一个收盘价。当您单击返回的股票代码时，它会将您带到另一个页面。在下一页上，我希望能够访问相同的 API 搜索，以显示股票的更多详细信息。

昨晚在 StackOverflow 上有人告诉我，我可以通过 Link 发送 API 数据，但是在查看了一些文档之后，我不确定如何具体实现我所描述的内容。

我不介意将 details.js 切换到类组件，我之前尝试过并设置了状态，但我遇到了很多不同的错误。

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"

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

          })

      }

  }

Answer 1

有几件事，因为那里有一些奇怪的组件/页面。您没有useEffect在details.js页面中导入错误显示：7:5 错误“useEffect”未定义您通过<Link>组件传递的状态需要通过props（或解构props并location直接获取）检索。details.js是一个功能组件，您没有setState(nor&nbsp;this) 功能。改用useState钩子。query永远不会向该组件提供参数。一旦你解决了主要问题，你应该通过props.错误“查询”未定义您的组件不是驼峰式的。所有错误都应通过以下方式修复：//import { Link } from "gatsby"import axios from 'axios';import React, { useEffect, useState } from 'react';import Layout from '../components/layout';const Details = props => {&nbsp; const [yourState, setYourState] = useState('');&nbsp; useEffect(() => {&nbsp; &nbsp; if (props.location.state.someState) {&nbsp; &nbsp; &nbsp; axios.get(`https://cloud.iexapis.com/stable/stock/${props.location.state.query}/quote?token=*****************`)&nbsp; &nbsp; &nbsp; &nbsp; .then(res => setYourState(res))&nbsp; &nbsp; }&nbsp; }, []);&nbsp; return <Layout>&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; {/*do stuff with your yourState. (i.e: console.log('hi!', yourState))*/}&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </Layout>;&nbsp; &nbsp; };export default Details;关于第二点和第三点：const Details= props => {}等于const Details= ({ location }) => {}。这种解构为您节省了一步并直接获取location对象，而不是props.location在您的条件下进行。setState功能组件而不是类组件中不允许使用您的函数。这完全取决于您选择一个或另一个，但您需要了解它们的“限制”和“好处”。在这种情况下，您需要使用useState钩子。如您所见，它由const [yourState, setYourState].&nbsp;第二个元素 (&nbsp;setYourState) 是用于存储 的值的函数yourState，因此，您的 axios 异步请求将使用setYourState函数存储并通过 检索yourState。当然，您可以随意命名。从您的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.htmlhttps://reactjs.org/docs/hooks-state.html如果您需要任何一点的详细解释，请告诉我，我会提供。