如何在我的组件加载时停止检索数据

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 并且应该这样做 it.As 在评论中提到，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);

如何在我的组件加载时停止检索数据

How to stop data being retrieved when my component is loaded

javascript

reactjs

react-hooks

react-functional-component