2

我只希望在单击生成笑话（单击此处获取笑声）按钮后显示数据，但是一旦页面加载就会检索它。我该如何阻止这个？ 

`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 吗？

4

2 回答 2

2 
`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 将在每次页面加载时运行。

于 2019-11-27T22:05:00.313 回答
0

我宁愿为笑话切换和笑话数据保持 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);
于 2019-11-27T23:26:49.830 回答