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

如何解决在 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 

有人能给我建议吗？

解决方法

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

您可以创建一组 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,[setData])