无法在反应中显示获取的 API 数据答案

【问题标题】：unable to display fetched API data in react无法在反应中显示获取的 API 数据
【发布时间】：2021-01-31 02:16:56
【问题描述】：

我是 react 的初学者，我正在从 https://www.boredapi.com/documentation#endpoints-price 获取数据。使用http://www.boredapi.com/api/activity/，您会得到一个格式为

的随机活动对象

{
    "activity": "Learn Express.js",
    "accessibility": 0.25,
    "type": "education",
    "participants": 1,
    "price": 0.1,
    "link": "https://expressjs.com/",
    "key": "3943506"
}

我正在尝试使用反应钩子获取其中的 10 个对象，然后显示它们。但是，当我尝试获取并显示单个活动名称时，使用下面的代码没有任何反应。我用钩子初始化了一个数组，我想每次获取时都附加一个新对象

使用Fetch.js 获取活动

import {useState , useEffect} from 'react';


export default function useFetch(){
  const [activities,setActivities] = useState([]);
  const getActivities = async () =>{
    for(let k=0;k<10;k++){
      let response = await fetch("http://www.boredapi.com/api/activity/");
      let result = await response.json();
      setActivities((oldstate)=>[...oldstate,result])
     }
  }
  useEffect(()=>{
    getActivities();
  }, [])

  return {activities};
}

AcitivityBar.js 显示活动

    import React from 'react';
import useFetch from './useFetch';


export default function ActivityBar(){
  const {activities} = useFetch();
  console.log(activities)
  return (
    <div className="activities-container">
        {
          (activities.map((a , index)=>{
            return <h1 key = {index}>hi</h1>
          }))
        }
    </div>
  );
}

【问题讨论】：

标签： reactjs api react-hooks

【解决方案1】：

您可以使用Promise.all 来并行等待多个请求：

这将同时显示结果，而不是一个接一个。

import { useState, useEffect } from 'react'

export default function useFetch() {
  const [activities, setActivities] = useState([])

  const getActivities = async () => {
    let arr = []
    for (let k = 0; k < 10; k++) {
      arr[k] =  new Promise(async (resolve, reject) => {
        fetch('http://www.boredapi.com/api/activity/').then((response) => {
          resolve(response.json())
        })
      })
    }
    Promise.all(arr).then((results) => {
      setActivities(results)
    })
  }
  useEffect(() => {
    getActivities()
  }, [])

  return { activities, getActivities }
}

【讨论】：

so promises 同时显示结果并异步等待一个接一个？
它一个接一个地获取。也就是说，prev 抓取完成后会触发下一次抓取。

【解决方案2】：

确保使用扩展运算符从响应中正确附加新活动，如下所示：

let response = await fetch("http://www.boredapi.com/api/activity/");
let activity = await response.json();
setActivities(prev => [...prev, activity]);

编辑：主要问题在于范围，activities 不会在渲染中持续存在。您应该考虑使用 prev 值。

【讨论】：

我后来改了。但是迭代呢？
哪些迭代？
显示名称
你收到活动了吗，你能记录一下吗？
我尝试了，但我没有定义

【解决方案3】：

您可能应该将迭代更改为以下内容：

const getActivities = async () =>{
    for(let k=0;k<10;k++){
      let response = await fetch("http://www.boredapi.com/api/activity/");
      let result = await response.json();
      setActivities(prev => [...prev, result])
     }
  }

useState 还有一个返回实际值的函数输入。您不应该依赖活动，因为当所有项目一次加载时，它始终是一个空数组

【讨论】：