时间戳

首页 > 解决方案 > 我的反应按钮不起作用 - 我使用 useState 和 useEffect

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

问题描述

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

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

标签： javascripthtmlreactjs

解决方案

由于过时的闭包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中的工作演示

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

推荐阅读