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中工作的演示</ p>

详细了解stale-closures

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

就像它只在单击按钮时才渲染，而不是每次重新渲染组件时一样。

我的Button在反应中不起作用-我使用useState和useEffect

3 个答案: