在 Gatsby 中使用 Link 发送 API 数据

Question

我正在使用 Gatsby 和股票市场 API 制作股票投资组合项目。目前，当您按股票代码搜索时，它会在表格中返回股票代码、市值和上一个收盘价。当您单击返回的股票代码时，它会将您带到另一个页面。在下一页上，我希望能够访问相同的 API 搜索，以显示股票的更多详细信息。昨晚在 StackOverflow 上有人告诉我，我可以通过 Link 发送 API 数据，但是在查看了一些文档之后，我不确定如何具体实现我所描述的内容。我不介意将 details.js 切换到类组件，我之前尝试过并设置了状态，但我遇到了很多不同的错误。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 })          })      }  }

Answer 1

有几件事，因为那里有一些奇怪的组件/页面。

1. 您没有useEffect在details.js页面中导入错误显示：

   7:5 错误“useEffect”未定义

2. 您通过<Link>组件传递的状态需要通过props（或解构props并location直接获取）检索。

3. details.js是一个功能组件，您没有setState(nor this) 功能。改用useState钩子。

4. query永远不会向该组件提供参数。一旦你解决了主要问题，你应该通过props.

   错误“查询”未定义

5. 您的组件不是驼峰式的。

所有错误都应通过以下方式修复：

//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，因此，您的 axios 异步请求将使用setYourState函数存储并通过 检索yourState。当然，您可以随意命名。

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

如果您需要任何一点的详细解释，请告诉我，我会提供。