我只希望在单击“生成笑话”(单击此处笑)按钮后显示数据,但在页面加载后会检索数据。我该如何阻止这个?
`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 吗?
最佳答案
`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 中删除并保留在 Click 上,这样就可以了。正如评论中提到的,useEffect 基本上会在每次页面加载时运行。
关于javascript - 加载组件时如何停止检索数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59079031/