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

【问题标题】：my Button in react dosen't work - I use useState and useEffect我的反应按钮不起作用 - 我使用 useState 和 useEffect
【发布时间】：2020-10-21 21:31:29
【问题描述】：

我不确定为什么我的 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>
      );
    }`

当我点击按钮时图像消失，我想在不刷新浏览器的情况下显示狗的新图像

【问题讨论】：

标签： javascript html reactjs

【解决方案1】：

在函数output 中设置的dog 的值永远不会因为过时关闭而改变。

因为您想填充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 中的工作演示

阅读更多关于stale-closures

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

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

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

【讨论】：