javascript - 点击卡片后响应来自外部 API 的获取请求

Question

我有一个小问题。我的应用程序在点击卡片后会获取请求。但我有一些麻烦。我的获取请求每次都会执行，但它必须仅在单击后执行。所以我的获取请求如下所示:

  useEffect(() => {
    let endpointForPokemonDetails = `${API_URL}${index}`;
    fetchPokemonDetails(endpointForPokemonDetails);
  });

  const fetchPokemonDetails = (endpointForPokemonDetails) => {
    fetch(endpointForPokemonDetails)
      .then((result) => result.json())
      .then((result) => {
        setPokemon([Pokemon, result]);
      }, setLoading(false))
      .catch((error) => console.log("Error:", error));
  };

在我点击卡片之前，console.log 中有一些错误:

你知道如何解决这个问题吗？

Answer 1

在按钮(或任何其他 HTML 元素)上使用 onClick 属性:

<button type="button" onClick={() => fetchPokemonDetails(index)}>
Fetch pokemon
</button>

同时更改 fetchPokemonDetails 以接受索引参数:

 const fetchPokemonDetails = (index) => {
    fetch(`${API_URL}${index}`)......

useEffect 是一个用于触发副作用的 React 钩子(Hook)。请参阅https://reactjs.org/docs/hooks-reference.html#useeffect