簡體   English   中英

我如何只獲取一次?

[英]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 > 更改userInfouserPhoto > 觸發渲染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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM