如何只取一次（取完一次就停止取数据）

Question

我正在尝试从网上获取数据 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}每秒都在变化，但我只想获取一次而不是每秒

Answer 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;

如何只取一次（取完一次就停止取数据）

How to fetch just one time ( stop fetching data after one is fetched )

javascript

api

fetch

reactjs