我怎么才能只取一次? [英] How do I fetch only once?
本文介绍了我怎么才能只取一次?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想从REST API中获取一个名字和一张照片,以添加到我网站中的某种卡片上,但它只是在循环中一次又一次地获取,并且永远不会停在一处(我只想要一个随机数字和照片,但它只是一直在更新这些东西)。
这是My Course元素,其中使用获取的数据创建卡片,这些数据在其他地方的函数中获取。
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;
这是获取接口的函数:
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)
},[]);
这篇关于我怎么才能只取一次?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文