如何只获取一次（获取一次后停止获取数据）答案

【问题标题】：How to fetch just one time ( stop fetching data after one is fetched )如何只获取一次（获取一次后停止获取数据）
【发布时间】：2021-12-22 12:10:32
【问题描述】：

我正在尝试从在线 Api 获取数据 - https://api.randomuser.me/ 它每次都会得到随机数据。

import { useState } from 'react';
import './App.css';

function App() {
  var [user, setUser] = useState()
  fetch('https://api.randomuser.me/')
   .then(res => {return res.json()})
   .then(data => setUser(data.results[0].gender)) 

// if i write: .then(data => console.log(data.results[0].gender)) it console log 2 times, i want to fetch data just one time no 2 times

  return (
    <div className="App">
      {user}
    </div>
  );
}

export default App;

显示 {user} 每秒都在变化，但我只想获取一次而不是每秒

【问题讨论】：

每次解决时，您都会更新状态，该状态会重新呈现组件，从而进行新的获取，从而更新状态...阅读有关 useEffect。
componentDidMount 或 useEffect

标签： javascript reactjs api fetch

【解决方案1】：

你需要使用useEffect，使用一个空方括号作为第二个参数只获取一次：

import { useState, useEffect } from 'react';
import './App.css';

function App() {
  var [user, setUser] = useState()
  
  useEffect(()=>{
    fetch('https://api.randomuser.me/')
    .then(res => {return res.json()})
    .then(data => setUser(data.results[0].gender)) 
  },[])

  return (
    <div className="App">
      {user}
    </div>
  );
}

export default App;

【讨论】：