加载我的组件时如何停止检索数据

Posted 2023-02-22

【中文标题】加载我的组件时如何停止检索数据

【英文标题】：How to stop data being retrieved when my component is loaded

【发布时间】：2020-03-23 12:44:26

【问题描述】：

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

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

【问题讨论】：

因为这就是 useEffect 的工作原理。页面加载和 useEffect 中的任何内容都将在加载时运行。

【参考方案1】：

`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 应该这样做。正如 cmets 中所述，useEffect 将在每次页面加载时运行。

【讨论】：

谢谢！这有帮助。我是一个初学者反应所以只是学习。您认为这是迄今为止一种很好的编码方式，还是您会推荐任何重大改进？

其实我觉得到目前为止看起来还不错。我会说与其将其命名为 getJoke，不如将其命名为 setJoke。由于您将其设置为状态而不是从中获取。让你少一些困惑。但到目前为止一切顺利，请继续保持@SharozeKhan

而且我认为 componentDidMount 仅适用于类组件。您正在使用功能组件。如果你使用函数式组件，你总是使用 useState 钩子

感谢您的帮助和信息！欣赏它

您可以通过删除多余的.then来改进此代码

【参考方案2】：

我宁愿为笑话切换和笑话数据保持 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);

【讨论】：

嘿，谢谢你，但不幸的是我不能使用 axios 任务要求我纯粹使用 reactjs，但我很感激你的建议。

"任务要求我纯粹使用reactjs"为什么不能使用axios？是你给的一些编码测试吗

这不是一个测试，只是我正在做的一个练习。

只需将 axios 替换为 fetch ，根本不是问题