亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

我的反應按鈕不起作用 - 我使用 useState 和 useEffect

我的反應按鈕不起作用 - 我使用 useState 和 useEffect

jeck貓 2022-10-27 14:39:34
我不確定為什么我的 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>      );    }`當我點擊按鈕圖像消失時,我想在不刷新瀏覽器的情況下顯示狗的新圖像
查看完整描述

3 回答

?
慕村225694

TA貢獻1880條經驗 獲得超4個贊

由于過時的閉包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中的工作演示

閱讀有關過時關閉的更多信息


查看完整回答
反對 回復 2022-10-27
?
四季花海

TA貢獻1811條經驗 獲得超5個贊

獲取第一張圖像后,您可以使用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>


查看完整回答
反對 回復 2022-10-27
?
慕容3067478

TA貢獻1773條經驗 獲得超3個贊

嘗試 : onClick={() => output()}

就像它只在您單擊按鈕時呈現,而不是在每次組件重新呈現時呈現。


查看完整回答
反對 回復 2022-10-27
  • 3 回答
  • 0 關注
  • 239 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號