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

【问题标题】：React: How to refresh a component with onClick using hooksReact：如何使用钩子通过 onClick 刷新组件
【发布时间】：2021-07-30 06:45:18
【问题描述】：

我对此很陌生。

作为练习，我做了一个应用程序，当单击按钮时会呈现猫的图像（图像来自 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>
  );
};

【问题讨论】：

除了你真的应该使用功能更新来切换show 状态（setShow(show => !show)）我认为这段代码没有问题。如果单击两次意味着将视图切换回CatsGrid，那么我希望这是设计的行为。您能否更准确地描述问题以及您期望的行为？
@DrewReese 感谢您的回复，很抱歉不清楚。我会用其他方式解释它。上面的代码工作正常，但不是我想要的方式。当我按下按钮时，首先图像被删除，我必须再次按下按钮才能带来新的图像。这个想法是通过单击来刷新新图像。我刚刚编辑了我的帖子，以便更好地解释。
我明白了，您是如何/在哪里生成图像的？ CatsGrid 处理吗？
是的，这是一个简单的 fetch api
好的，如果我理解正确，您想点击父级中的按钮并获取CatsGrid 来获取新图像吗？你能分享你的CatsGrid 组件吗？可能有几个选项，但我想看看你正在使用什么。

标签： reactjs react-hooks onclick use-state

【解决方案1】：

好的，假设CatsGrid 中的getCats 中的fetch 总是返回一组新数据，那么我建议只在CatsGrid 组件上使用React 键，这样React 就会卸载/挂载它的新实例.当 React 键更改时，React 会将其解释为要呈现的新组件。

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>
  );
};

【讨论】：

效果很好。谢谢你，先生！我需要大量练习。