如何在我的組件加載時停止檢索數據

Question

我只希望在單擊生成笑話（單擊此處獲取笑聲）按鈕后顯示數據，但是一旦頁面加載就會檢索數據。 我該如何阻止呢？

`import React, { useState, useEffect } from "react";

function App() {
  const [joke, getJoke] = useState(" ")
  const newJoke = () => {
    fetch("http://api.icndb.com/jokes/random")
      .then(result => result.json())
      .then(result2 => {
        console.log(result2)
        getJoke(result2.value.joke)
      })
  }
  useEffect(() => {
    newJoke()
  }, [])

  return (
    <div className="jokeSection">
      <h1>Chuck norris jokes</h1>
      <h3>{joke}</h3>
      <button onClick={() => newJoke()}>Click here for a chuckle</button>
    </div>
  )
}
export default App;`

這是一種好的編碼方式嗎？ 我應該使用不同的功能，例如 componentDidMount 嗎？

Answer 1

`import React, { useState, useEffect } from "react";

function App() {
  const [joke, getJoke] = useState(" ")
  const newJoke = () => {
    fetch("http://api.icndb.com/jokes/random")
      .then(result => result.json())
      .then(result2 => {
        console.log(result2)
        getJoke(result2.value.joke)
      })
  }
  useEffect(() => {

  }, [])

  return (
    <div className="jokeSection">
      <h1>Chuck norris jokes</h1>
      <h3>{joke}</h3>
      <button onClick={() => newJoke()}>Click here for a chuckle</button>
    </div>
  )
}
export default App;`

將它從 useEffect 中刪除並保持 onClick 並且應該這樣做。如評論中所述，useEffect 將在每次頁面加載時運行。

Answer 2

我寧願為笑話切換和笑話數據保持 2 種狀態，如下所示。

名為 useEffect 的效果掛鈎用於使用 axios 從 API 獲取數據，並使用狀態掛鈎的更新功能在組件的本地狀態中設置數據。 承諾解決發生在 async/await 中。

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import axios from "axios";

function App() {
  const [joke, setJoke] = useState(0);
  const [jokeData, setJokeData] = useState("");

  function newJoke(){
    setJoke(joke=>joke+1);
  }

  useEffect( () => {
    (async function loadJoke() {
     if(joke>0){ 
     const response=await axios.get('https://api.icndb.com/jokes/random');
     setJokeData(response.data.value.joke);
     }
    })();
    }, [joke]);

  return (
    <div className="jokeSection">
      <h1>Chuck norris jokes</h1>
      <h3>{jokeData}</h3>
      <button onClick={() => newJoke()}>Click here for a chuckle</button>
    </div>
  );
}
export default App;
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);