如何仅从 React 中的 API 获取第一个数据？

Posted 2023-02-22

【中文标题】如何仅从 React 中的 API 获取第一个数据？

【英文标题】：How to fetch only the first data from an API in React?

【发布时间】：2022-01-07 05:13:02

【问题描述】：

我目前正在开发一个网站，当我打开它时，应该总是打印来自 API 的随机引用。但是，当我打开 API 时，它不会随机显示 json 格式的报价，而是输出存储在数组中的所有报价。 我的问题是，在我的网站上，所有引号都在旋转，直到调试器因内存不足而停止。如何让 map 函数只显示数组的第一个数据？ 我的代码：

const randomIndex = (arr) => 
    // returns a random int value to use as an index
    return Math.floor(Math.random() * arr.length);
  ;

  const [quote, setQuote] = useState("");
  const [index, setIndex] = useState(0);

  const QuoteAPI = async () => 
    let arrayOfQuotes = [];
    const data = await axios.get("https://type.fit/api/quotes");
    arrayOfQuotes = data.data;
    console.log(arrayOfQuotes);
    const quote = arrayOfQuotes.map((arrayOfQuote) => (
      <div key=arrayOfQuote.id>
        <h3>arrayOfQuote.text</h3>
        <p>arrayOfQuote.author</p>
      </div>
    ));
    console.log(quote);
    setQuote(quote);
  ;

  useEffect(() => 
    QuoteAPI();
    setIndex(randomIndex(quote));
  , [quote]);

【问题讨论】：

有点不确定你的目标是什么。根据引用的 URL，似乎只有超过 1600 个引号的固态。如果您尝试仅使用 1 个随机报价，那么您将走错路。在加载时，您应该提取数据，然后根据数组的长度随机决定报价，我将缓存所有报价并仅使用您使用的报价构建第二个数组，这样您的随机不会重复。

axios-cache 适配器会是缓存的好选择吗？

我没玩过不研究就知道了。理想情况下，我会使用localstorage 来存储引号并相应地引用。还取决于您是否要使用它可能会考虑为它构建上下文的区域。

我正在使用本地存储。我试试看，谢谢你的帮助！

【参考方案1】：

您不需要使用 map() 方法，因为它返回一个数组而不是单个对象。您只需要获取返回数组中的第一项，然后格式化并显示它。像这样的：

     let arrayOfQuotes = [];

        const data = await axios.get("https://type.fit/api/quotes");

        arrayOfQuotes = data.data;

        if(arrayOfQuotes.length > 0)
           const quote = (
              <div key=arrayOfQuotes[0].id>
                 <h3>arrayOfQuotes[0].text</h3>
                 <p>arrayOfQuotes[0].author</p>
              </div>);
          setQuote(quote);
       

顺便说一句，当您需要单引号时，您使用的 API 端点会返回一个列表。我认为应该有另一个端点提供单引号。有的话需要查看API文档。

【讨论】：

我试过了，它没有显示任何东西。我在代码中的 setQuote 前面放了一个 console.log(quote) 并且它一直在旋转：$$typeof: Symbol(react.element), type: 'div', key: null, ref: null, props: …, …

为什么你的 useEffect() 中有 [quote]？我认为用 [] 替换它可以解决旋转问题。因为您只需要为每个页面加载提供一个报价。正确的？所以它不应该在每次状态变化时获取新的报价。

表示当前不支持参数化请求。端点保持不变。

它现在只返回一个对象，但仍然不显示它。这就是我删除引用时调试器所说的：React Hook useEffect has a missing dependency: 'quote'。要么包含它，要么移除依赖数组。

关于未在控制台中显示对象，我认为这是由于您添加到引用中的标签。尝试只记录不带任何标签的报价。或者尝试将其呈现到页面而不是将其记录到控制台。