![](/img/trans.png)
[英]How to stop the javascript loader when the data retrieved from the database
[英]How to stop data being retrieved when my component is loaded
我只希望在单击生成笑话(单击此处获取笑声)按钮后显示数据,但是一旦页面加载就会检索数据。 我该如何阻止呢?
`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 中删除并保持 onClick 并且应该这样做。如评论中所述,useEffect 将在每次页面加载时运行。
我宁愿为笑话切换和笑话数据保持 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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.