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

Question

我是 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"
} 

我正在尝试使用 react hooks 获取其中 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>
  );
}

Answer 1

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

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

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

Answer 2

您可能应该将您的迭代更改为这样的：

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 也有一个返回实际值的函数输入。 您不应该依赖活动，因为当所有项目一次加载时，它始终是一个空数组

Answer 3

您可以使用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 }
}