时间戳

首页 > 解决方案 > 单击按钮时从 API 获取随机数据 - React

javascript - 单击按钮时从 API 获取随机数据 - React

问题描述

发送请求时，在 Chrome 中重新加载页面时响应始终相同，但在 FireFox 中是随机的（应该如此）。页面重新加载后，按钮单击数据始终相同。我想在每个按钮单击时发出请求以将不同的数据存储在状态挂钩中。

我也在 vanilla js 中尝试过，响应也是一样的。

是什么导致数据在请求时始终相同而不是随机的？我会将先前获取的数据存储在状态中，但首先必须弄清楚为什么它总是相同，我将不胜感激任何帮助，因为我是这些 api 调用的新手并且也会做出反应。

应用程序.js：

import FetchColor from './common/FetchColor';
import ColorList from './components/ColorList';
import { useEffect, useState } from 'react';

function App() {
  const [colorData, changeColor] = useState('');

  const changeColorHandler = () => {
    FetchColor(changeColor);
  };

  useEffect(() => {
    FetchColor(changeColor);
  }, []);

  return (
    <div className='App'>
      <button onClick={changeColorHandler}>
        {colorData ? colorData.tags[0].name : 'Change Color'}
      </button>
      <ColorList color={colorData} />
    </div>
  );
}

export default App;

FetchColor.js：

const FetchColor = async (changeColor) => {
  const response = await fetch('https://www.colr.org/json/color/random');
  const data = await response.json();
  const [color] = data.colors;
  changeColor(color);
};

export default FetchColor;

香草 JavaScript script.js：

const fetchButton = document.getElementById('fetch-api');

fetchButton.addEventListener('click', fetchColorFunc);

async function fetchColorFunc() {
  const response = await fetch('https://www.colr.org/json/color/random');
  console.log(`Response: ${response}`);
  const data = await response.json();
  console.log(`Data: ${data}`);
}

标签： javascriptreactjsapifetch

解决方案

这很可能是由于缓存。如果您查看开发者工具的 Chrome 网络面板中的请求，您应该会看到请求已缓存，因此始终返回相同的值。

Fetch可选地接受一个包含将应用于请求的自定义设置的 init 对象，包括缓存。例如，您可以通过cache: "no-cache"或cache: "no-store"绕过缓存（有关详细信息和差异，请参阅文档），您将获得每个请求的随机结果。请参阅以下代码段作为示例：

async function fetchColorFunc() {
  const response = await fetch('https://www.colr.org/json/color/random', { cache: "no-cache" });
  const data = await response.json();
  console.log(`Data: ${JSON.stringify(data)}`);
}

fetchColorFunc();

推荐阅读