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

我只希望在单击generate joke（单击此处以获取笑声）按钮后显示数据，但在页面加载后将检索数据。我该怎么阻止这一切

`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;`

`import React，{useState，useffect}来自“React”；
函数App（）{
const[joke，getJoke]=useState（“”）
const newJoke=（）=>{
取回（“http://api.icndb.com/jokes/random")
.then（result=>result.json（））
。然后（结果2=>{
console.log（result2）
getJoke（result2.value.joke）
})
}
useffect（（）=>{
新笑话（）
}, [])
返回(
查克·诺里斯的笑话
{笑话}
newJoke（）}>单击此处可获得一个笑声
)
}
导出默认应用程序`

这是一种很好的编码方式吗？我是否应该使用不同的函数，如componentDidMount

`import React，{useState，useffect}来自“React”；
`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;`

函数App（）{
const[joke，getJoke]=useState（“”）
const newJoke=（）=>{
取回（“http://api.icndb.com/jokes/random")
.then（result=>result.json（））
。然后（结果2=>{
console.log（result2）
getJoke（result2.value.joke）
})
}
useffect（（）=>{
}, [])
返回(
查克·诺里斯的笑话
{笑话}
newJoke（）}>单击此处可获得一个笑声
)
}
导出默认应用程序`

---

将其从useEffect中删除并保持单击状态，这样就可以了。如评论中所述，useEffect基本上会在每次加载页面时运行。

我希望为笑话切换和笑话数据保留两种状态，如下所示

名为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);

import React，{useState，useffect}来自“React”；
从“react dom”导入react dom；
从“axios”导入axios；
函数App（）{
const[joke，setJoke]=useState（0）；
const[jokeData，setJokeData]=useState（“”）；
函数newJoke（）{
setJoke（joke=>joke+1）；
}
useffect（（）=>{
（异步函数loadJoke（）{
如果（笑话>0）{
const response=等待axios.get（'https://api.icndb.com/jokes/random');
setJokeData（response.data.value.joke）；
}
})();
}[笑话]；
返回(
查克·诺里斯的笑话
{jokeData}
newJoke（）}>单击此处可获得一个笑声
);
}
导出默认应用程序；
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

因为useffect就是这样工作的。页面加载，任何正在使用的东西都将加载运行。谢谢！这很有帮助。我是一个反应的初学者，所以只是学习。到目前为止，你会说这是一种很好的编码方式吗？或者你会推荐任何主要的改进吗？实际上，我认为到目前为止它看起来相当不错。我会说，与其给它取名为getJoke，不如给它取名为setJoke。因为你把它设置为状态，而不是从中获取。让你不那么困惑。但到目前为止，请继续@sharozekhanad@componentDidMount，我认为componentDidMount只在类组件中起作用。您正在使用功能组件。如果您使用功能组件，请始终使用useState钩子。感谢您的帮助和信息！感谢你可以通过删除多余的

来改进此代码。然后

嘿，谢谢你，但不幸的是我不能使用axios。任务要求我纯粹使用reactjs，但我感谢你的建议。“任务要求我纯粹使用reactjs”为什么你不能使用axios？这不是一个测试，只是我正在做的一个练习。用fetch替换axios，这根本不是问题