Reactjs 无法在react中显示获取的API数据

我完全是react的初学者，我正在从中获取数据。使用

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钩子获取其中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};
}

从'react'导入{useState，useffect}；
导出默认函数useFetch（）{
const[activities，setActivities]=useState（[]）；
const getActivities=async（）=>{
for（设k=0；k[…oldstate，result]）
}
}
useffect（（）=>{
getActivities（）；
}, [])
返回{活动}；
}

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>
  );
}

从“React”导入React；
从“/useFetch”导入useFetch；
导出默认函数ActivityBar（）{
const{activities}=useFetch（）；
console.log（活动）
返回(
{
（活动图（（a，索引）=>{
回电
}))
}
);
}

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

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

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])
     }
  }

编辑：

---

主要问题在于作用域，

活动

不会在整个渲染中持久化。您应该考虑使用PREV值。

确保使用扩展运算符从响应中适当地追加新的活动，例如：

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

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])
     }
  }

编辑：

---

主要问题在于作用域，

活动

不会在整个渲染中持久化。你应该考虑使用PREV值。

你应该把你的迭代变成这样的：

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

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])
     }
  }

const getActivities=async（）=>{
for（设k=0；k[…prev，result]）
}
}

---

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

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

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

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])
     }
  }

const getActivities=async（）=>{
for（设k=0；k[…prev，result]）
}
}

---

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

您可以使用

Promise。all

并行等待多个请求：

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

从'react'导入{useState，useffect}
导出默认函数useFetch（）{
const[activities，setActivities]=useState（[]）
const getActivities=async（）=>{
设arr=[]
for（设k=0；k<10；k++）{
arr[k]=新承诺（异步（解析、拒绝）=>{
取（'http://www.boredapi.com/api/activity/）。然后（（回应）=>{
解析（response.json（））
})
})
}
承诺。所有（arr）。然后（（结果）=>{
活动（结果）
})
}
useffect（（）=>{
getActivities（）
}, [])
返回{activities，getActivities}
}

您可以使用

Promise.all

并行等待多个请求：

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

从'react'导入{useState，useffect}
导出默认函数useFetch（）{
const[activities，setActivities]=useState（[]）
const getActivities=async（）=>{
设arr=[]
for（设k=0；k<10；k++）{
arr[k]=新承诺（异步（解析、拒绝）=>{
取（'http://www.boredapi.com/api/activity/）。然后（（回应）=>{
解析（response.json（））
})
})
}
承诺。所有（arr）。然后（（结果）=>{
活动（结果）
})
}
useffect（（）=>{
getActivities（）
}, [])
返回{activities，getActivities}
}

我后来更改了。但是迭代呢？哪些迭代？为了显示名称，你是否得到了活动，你能记录下来吗？我尝试过，但我后来得到了未定义的更改。但是迭代呢？哪些迭代？要显示名称，你得到活动了吗？你能记录吗？我尝试，但我没有得到定义，所以承诺同时显示结果，异步一个接一个地等待？它一个接一个地获取。也就是说，上一次抓取完成后会触发下一次抓取。所以承诺会同时显示结果，异步会一个接一个地等待？它会一个接一个地抓取。也就是说，上一次抓取完成后会触发下一次抓取。