Question

我正在获取一个对象并从中提取一个 url。

但是，我的 console.log 被记录了 8 次。我的错误在哪里？

import React from 'react';
// import Card from './Card';

function Gameboard() {
  let url = '';
  const [card, setCard] = React.useState('kk');
  const [cardUrl, setCardUrl] = React.useState('');

  fetch('https://api.pokemontcg.io/v2/cards/base1-1', {
    mode: 'cors',
    headers: {
      'X-Api-key': 'myapi',
    },
  })
    .then((response) => response.json())
    .then((data) => {
      console.log(data.data.images.large);
      setCardUrl(data.data.images.large);
    });
  return <div>{cardUrl}</div>;
  // <Card key={data.number} url={data.images.large} />;
}
export default Gameboard;

Answer 1

你可以将你的提取代码放在一个 useEffect 中，并使用 [] 作为依赖数组，这样它只会触发一次

import React from 'react';

function Gameboard() {
  let url = '';
  const [card, setCard] = React.useState('kk');
  const [cardUrl, setCardUrl] = React.useState('');

  React.useEffect(() => {
    fetch('https://api.pokemontcg.io/v2/cards/base1-1', {
      mode: 'cors',
      headers: {
        'X-Api-key': 'myapi',
      },
    })
      .then((response) => response.json())
      .then((data) => {
        console.log(data.data.images.large);
        setCardUrl(data.data.images.large);
      });
  }, []}
  return <div>{cardUrl}</div>;
  // <Card key={data.number} url={data.images.large} />;
}
export default Gameboard;

如何让我的 fetch 在 React 组件中只被调用一次？

1 个答案: