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

0

以下のように、ジョーク トグルとジョーク データの 2 つの状態を維持したいと考えています。

useEffect というエフェクト フックを使用して、API から axios を使用してデータをフェッチし、状態フックの update 関数を使用してコンポーネントのローカル状態にデータを設定します。promise の解決は 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 に答える