我的反应按钮不起作用 - 我使用 useState 和 useEffect

Question

我不确定为什么我的 Button 不起作用，我使用 useState 和 useEffect这是我的代码：    import React, { useState, useEffect } from "react";    // import Timeout from "await-timeout";    import axios from "axios";        export default function Dogs() {      const [dog, set_Dog] = useState(" ");      console.log({ dog });          useEffect(() => {        async function getFetch() {          const res = await axios.get("https://dog.ceo/api/breeds/image/random");          const {            data: { message },          } = res;          console.log("Got back", message);          set_Dog(message);        }        getFetch();      }, []);          function output() {        set_Dog(dog);        // console.log(set_Dog({ dog }));      }      return (        <div>          <h2>If you like Dogs,{dog} Press Button</h2>          <button onClick={output}>Click me</button>          {dog}          <img src={dog} />        </div>      );    }`当我点击按钮图像消失时，我想在不刷新浏览器的情况下显示狗的新图像

Answer 1

由于过时的闭包dog，函数中设置的值永远output不会改变。

因为您想要填充状态mount并在用户单击按钮时对其进行更改，所以您必须在函数范围内创建调用 API 的函数并用 记忆它useCallback，相同的函数可以传递给onClick. 例如，

export default function Dogs() {

  const [dog, set_Dog] = useState("");

  console.log({ dog });

  const getDogPic = useCallback(async () => {

    const res = await axios.get("https://dog.ceo/api/breeds/image/random");

    const {

      data: { message }

    } = res;

    console.log("Got back", message);

    set_Dog(message);

  }, []);

  useEffect(() => {

    getDogPic();

  }, []);

  return (

    <div>

      <h2>If you like Dogs,{dog} Press Button</h2>

      <button onClick={getDogPic}>Click me</button>

      {dog}

      <img src={dog} alt={"dog-pic"} />

    </div>

  );

}

Codesandbox中的工作演示

阅读有关过时关闭的更多信息

Answer 2

获取第一张图像后，您可以使用useRef保留对您的函数的引用。

const click_ref = React.useRef(null);

useEffect(() => {

    async function getFetch() {

      const res = await axios.get("https://dog.ceo/api/breeds/image/random");

      const {

        data: { message },

      } = res;

      console.log("Got back", message);

      set_Dog(message);

    }

    getFetch();

    click_ref.current = getFetch;

  }, []);

<button onClick={() => click_ref.current()}>Click me</button>

Answer 3

尝试 ： onClick={() => output()}

就像它只在您单击按钮时呈现，而不是在每次组件重新呈现时呈现。