我如何只获取一次？答案

【问题标题】：How do I fetch only once?我如何只获取一次？
【发布时间】：2020-09-10 00:01:27
【问题描述】：

我想从名为“randomuserAPI”的休息 API 中获取姓名和照片，以添加到我网站中的某种卡片中，但它只是在循环中一次又一次地获取，而且永远不会停止（我只想要一个随机数和一张照片，但它只是一直在更新这些东西）。

这是我的课程元素，其中卡片是使用获取的数据创建的，这些数据是在其他地方的函数中获取的。

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 的函数：

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;

【问题讨论】：

不应该去掉url中的results参数吗？这定义了您想要多少用户。它当前设置为 results=3，这应该会给你三个用户。

标签： javascript reactjs fetch-api rest

【解决方案1】：

问题：

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)
},[]);

【讨论】：

【解决方案2】：

getUser没有任何限制会导致无限循环（组件Course渲染>调用getUser>更改userInfo和userPhoto>触发渲染Course>再次调用getUser> ... )

您必须将导致副作用的函数（获取 API）放入 useEffect 钩子中，在此上下文中为 getUser(changeUserInfo, changeUserPhoto) 函数。

useEffect = (() => {
   getUser(changeUserInfo, changeUserPhoto)
}, [])

空数组确保getUser 函数只运行一次。

你应该阅读更多关于useEffect hook

【讨论】：

【解决方案3】：

据我了解，您的担忧是：
您需要来自 API 的单一结果。你需要结果是恒定的，不能改变。

不要使用https://randomuser.me/api?results=3，而是使用https://randomuser.me/api?results=1 您正在获取 3 个结果并期待一个结果。

要使结果保持不变，您需要将获取的结果存储在数据库中，并在获取之前检查数据是否存在。仅当数据库中不存在数据时才需要获取数据。

【讨论】：