Javascript 在React钩子中从具有不同id的URL获取数据

我是新来的

for循环用于从具有不同ID的url获取数据

数据中的对象包含相同的键和不同的值

我要做的是将这些数据对象存储到带有索引的数组中

如下所示：

dataArr [
 0: {key: 1, value: 1},
 1: {key: 2, value: 2},
 2: {key: 3, value: 3}
]

这是我试过的

var ids = [1,2,3]
const [data, setData] = useSate({});
const dataArr = [];
const fetchData = async() => {
  for(var i =0; i < ids.length; i++) {
    axios.get(`http://myURL/${ids[i]}`)
    .then(res => {
       dataArr.push(setData(res.data))
     })
   }
}


useEffect(() => {
   fetchData ();
},[]);
console.log(dataArr[0]) //undefined
console.log(dataArr) // empty
console.log(data) // get objects independently 

varids=[1,2,3]
const[data，setData]=useSate（{}）；
常量dataArr=[]；
const fetchData=async（）=>{
对于（变量i=0；i{
数据传送推送（设置数据（恢复数据））
})
}
}
useffect（（）=>{
fetchData（）；
},[]);
console.log（dataArr[0]）//未定义
console.log（dataArr）//空
console.log（data）//独立获取对象

---

有人能告诉我吗？

axios.get

是异步的，

console.log

语句在问题解决之前执行。我建议阅读答案，以便更好地理解

您可以创建一个承诺数组并使用

await Promise.all（…）

来等待它们，以获取所有响应，然后使用新状态调用

setData

。您还应该将初始状态设置为空数组

const [data, setData] = useState([])

useEffect(() => {
  const fetchData = async () => {
    const ids = [1, 2, 3]
    const responses = await Promise.all(
      ids.map((id) => axios.get(`http://myURL/${id}`))
    )
    setData(responses.map((res) => res.data))
  }

  fetchData()
}, [])

如果您进行了设置，它将显示一条警告，提示您向依赖项数组添加

setData

，因为效果取决于它。添加它完全可以，因为函数的引用在重新渲染时不会改变

useEffect(() => {
  const fetchData = async () => {
    const ids = [1, 2, 3]
    const responses = await Promise.all(
      ids.map((id) => axios.get(`http://myURL/${id}`))
    )
    setData(responses.map((res) => res.data))
  }

  fetchData()
}, [setData])

---

非常感谢。真管用@如果不客气的话。你明白问题中的代码为什么不起作用了吗？据我从你发送的链接中的答案了解，我的代码会立即执行。因此，我应该使用

Promise

来包含直接对象。在我的代码中，我没有使用

Promise

，而是将对象推送到数组中。我理解正确吗？@ewef“我的代码立即执行。”没错。“因此，我应该使用Promise来包含直接对象。”不确定我是否理解这一部分。只有当承诺解析并且您不能在异步函数之外访问它时，响应才可用。这有道理吗？我真的很感谢你的周到解释。我从来没有想过承诺。