时间戳

首页 > 解决方案 > 在 React Hooks 中从具有不同 id 的 URL 获取数据

javascript - 在 React Hooks 中从具有不同 id 的 URL 获取数据

问题描述

我是 React 的新手。

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

有人可以给我建议吗？

标签： javascriptreact-hooks

解决方案

axios.get是异步的，并且console.log语句在 promise 解决之前执行。我建议阅读这个答案以获得更好的理解。

您可以创建一个 promise 数组并等待它们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()
}, [])

如果你设置eslint-plugin-react-hooks，它会显示一个警告添加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])

推荐阅读