[英]How do I fetch only once?
我想從名為“randomuserAPI”的 rest API 中獲取名稱和照片,以添加到我網站中的某種卡片中,但它只是不斷循環中一次又一次地獲取,並且永遠不會停止(我只想一個隨機數和照片,但它只是一直在更新這些東西)。
這是我的課程元素,其中卡片是使用獲取的數據創建的,這些數據是在其他地方的 function 中獲取的。
import React, { useState } from 'react';
import '../App.css';
import {getUser} from '../library/getUsers.js'
const Course = ({author}) => {
const [userInfo, changeUserInfo] = useState('User')
const [userPhoto, changeUserPhoto] = useState('https://i.stack.imgur.com/l60Hf.png')
getUser(changeUserInfo, changeUserPhoto)
return(
<div className="course">
<h4>{userInfo}</h4>
<p>{author}</p>
<img src={userPhoto} width="200px" height="200px" alt=""></img>
</div>
);
}
export default Course;
這是獲取 API 的 function:
export async function getUser(changeUserInfo, changeUserPhoto){
await fetch('https://randomuser.me/api?results=3')
.then(res => res.json())
.then((user) => {
changeUserInfo(`${user.results[0].name.first} ${user.results[0].name.first}`)
changeUserPhoto(user.results[0].picture.large)
})
}
我不知道這里是否有任何問題,但這里是 App 元素:
import React from 'react';
import Course from './elements/course';
import './App.css';
function App() {
return (
<div className="app">
<Course
author = 'Tato Gucci'
/>
</div>
);
}
export default App;
問題:
render -> getUser -> setting State -> re-render -> getUser .....
const Course = ({author}) => {
const [userInfo, changeUserInfo] = useState('User')
const [userPhoto, changeUserPhoto] = useState('https://i.stack.imgur.com/l60Hf.png')
//------------- ISSUE -------------
// `getUser` get called when ever component get rendered
// and it is setting up state , so it is causing re-rendering
// so it's kind of infinte loop
// render -> getUser -> setState -> re-render .....
getUser(changeUserInfo, changeUserPhoto)'
return(
<div className="course">
<h4>{userInfo}</h4>
<p>{author}</p>
<img src={userPhoto} width="200px" height="200px" alt=""></img>
</div>
);
}
解決方案:
您可以將getUser
放在useEffect
:因此只有在組件安裝時才會調用它
useEffect(() => {
getUser(changeUserInfo, changeUserPhoto)
},[]);
沒有任何限制的getUser
將導致無限循環(組件Course
渲染 > 調用getUser
> 更改userInfo
和userPhoto
> 觸發渲染Course
> 再次調用getUser
>...)
您必須將導致副作用(獲取 API)的 function 放入useEffect
掛鈎,在此上下文中為getUser(changeUserInfo, changeUserPhoto)
function。
useEffect = (() => {
getUser(changeUserInfo, changeUserPhoto)
}, [])
空數組確保getUser
function 只運行一次。
你應該閱讀更多關於useEffect
鈎子的信息
據我了解,您的擔憂是:
您需要來自 API 的單個結果。 你需要結果是恆定的,不能改變。
而不是使用https://randomuser.me/api?results=3
使用https://randomuser.me/api?results=1
您正在獲取 3 個結果並期望一個結果。
為了使結果保持不變,您需要將獲取的結果存儲在數據庫中,並在獲取之前檢查數據是否存在。 如果數據庫中不存在數據,您只需要獲取數據。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.