我怎么才能只取一次？-前端问题

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="IiZndDsmbHQ7L2ltZyZndDsKICAgICAgICAmbHQ7L2RpdiZndDsKICAgICk7Cn0KCmV4cG9ydCBkZWZhdWx0IENvdXJzZTsKPC9jb2RlPjwvcHJlPgoKPHA+6L+Z5piv6I635Y+W5o6l5Y+j55qE5Ye95pWw77yaPC9wPgoKPHByZT48Y29kZSBjbGFzcz0="language-html'>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="IiZndDsmbHQ7L2ltZyZndDsKICAgICAgICAmbHQ7L2RpdiZndDsKICAgICk7Cn0KPC9jb2RlPjwvcHJlPgoKPGhyPgoKPHA+PHN0cm9uZz7op6PlhrPmlrnmoYjvvJo8L3N0cm9uZz48L3A+Cgo8cD7mgqjlj6/ku6XlsIY8Y29kZT5nZXRVc2VyPC9jb2RlPuaUvuWcqDxjb2RlPnVzZUVmZmVjdDwvY29kZT7kuK3vvJrov5nmoLflj6rmnInlnKjmjILovb3nu4Tku7bml7bmiY3kvJrosIPnlKjlroM8L3A+Cgo8cHJlPjxjb2RlIGNsYXNzPQ=="language-html'>useEffect(() => {
    getUser(changeUserInfo, changeUserPhoto)
},[]);

这篇关于我怎么才能只取一次？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！