在NextJ中使用SWR和上下文API时未获取数据

Question

我正在尝试查看使用SWR从API获得的数据，并将API中的货币设置为用户通过上下文API使用的任何内容，但我看不到任何数据。请有人帮忙。知道什么不对。

这是代码

import React from 'react'
import useSWR from "swr";
import {CryptoState} from "../context/cryptoContext"
import { useContext } from "react";


function Trending() {

  const {currency } = useContext(CryptoState)

  const address = `https://api.coingecko.com/api/v3/coins/markets?vs_currency=${currency}&order=gecko_desc&per_page=10&page=1&sparkline=false&price_change_percentage=24h`;
  const fetcher = async (url) => await axios.get(url).then((res) => res.data);
  const { data, error } = useSWR(address, fetcher);

  if (error) <p>Loading failed...</p>;
  if (!data) <h1>Loading...</h1>;

  return (
    <div>
      {data && console.log(data)}
    </div>
  )
}

export default Trending;

Answer 1

代码下面的工作（测试）：

import React from 'react'
import useSWR from "swr";


function Trending() {


  const address = `https://api.coingecko.com/api/v3/coins/markets?vs_currency=USD&order=gecko_desc&per_page=10&page=1&sparkline=false&price_change_percentage=24h`;
  const { data, error } = useSWR(address);

  if (error) <p>Loading failed...</p>;
  if (!data) <h1>Loading...</h1>;
  return (
    <div>
      <pre>
        <code>
          {JSON.stringify(data, null, 2)}
        </code>
      </pre>
    </div>
  )
}

export default Trending;

检查您的const {crorment} = usecontext（cryptostate）

在您的情况下fetcher不需要，> fetcher fetcher 变量是针对复杂情况进行的。

PS而不是检查您的货币并使用usecontext挂钩，您可以将此变量直接发送到您的函数，以函数趋势（货币）