React：如何使用钩子通过 onClick 刷新组件

Question

我对此很陌生。

作为练习，我做了一个应用程序，它在单击按钮时呈现猫的图像（图像来自 API，效果很好）。

我的想法是让按钮在按下时刷新新图像，我知道我必须使用钩子，但我不确定我是否应该使用 useState、setState 或其他东西。

这是代码

import React, { useState } from "react";
import { CatsGrid } from "./components/CatsGrid";

const RandomCatApp = () => {
  return (
    <div className="catContainer">
      <h1>Random kittens</h1>

      <button onClick={'Some code here'} className="catBtn">
        Generate random kitten
      </button>

      <CatsGrid />
    </div>
  );
};

export default RandomCatApp;

按钮必须刷新组件才能显示来自 API 的新图像。 CatsGrid 组件工作正常，我刚刚对其进行了测试。我的问题是上面代码中的“onClick”和 useState 或其他内容。

这里是 CatsGrid 组件以防万一：

import React, { useState, useEffect } from "react";

export const CatsGrid = () => {
  const [imagen, setImagen] = useState([]);

  useEffect(() => {
    getCats();
  }, []);

  const getCats = async () => {
    const url = "someApiKey";

    const resp = await fetch(url);

    const data = await resp.json();

    const catImg = data.map((img) => {
      return {
        id: img.id,
        url: img.url,
      };
    });

    setImagen(catImg);
  };

  return (
    <div className="imgContainer">
      {imagen.map(({ id, url }) => (
        <img className="catImg" key={id} src={url} alt="" />
      ))}
    </div>
  );
};

Answer 1

好的，假设 CatsGrid 中的 getCats 中的 fetch 总是 returns 一组新数据，那么我建议只使用 [=13 上的 React 键=] 组件，因此 React 将 unmount/mount 它的一个新实例。当 React 键更改时，React 会将其解释为要呈现的 new 组件。

const RandomCatApp = () => {
  const [catsKey, setCatsKey] = React.useState(0);
  return (
    <div className="catContainer">
      <h1>Random kittens</h1>

      <button
        onClick={() => setCatsKey(key => key + 1)}
        className="catBtn"
      >
        Generate random kitten
      </button>

      <CatsGrid key={catsKey} />
    </div>
  );
};

React：如何使用钩子通过 onClick 刷新组件

React: How to refresh a component with onClick using hooks

onclick

reactjs

react-hooks

use-state