在React的useEffect中用forEach调用axios报Symbol(Symbol.iterator)错误

• Array.forEach()方法执行后返回值为undefined，而Promise.all()要求传入由Promise实例组成的可迭代对象（如数组），传入undefined自然会触发undefined is not iterable的类型错误。
• 你需要将forEach替换为Array.map()，map会遍历数组并返回新数组，正好可以收集每个axios请求返回的Promise实例，符合Promise.all()的传参要求。

import './App.css';
import Card from "./Card"
import Books from "./Books"
import { useEffect, useState } from 'react';
import axios from "axios"

function App() {
  // 可选：添加state存储请求返回的书籍数据
  const [bookList, setBookList] = useState([]);

  useEffect(() => {
    async function fetchBookInfo() {
      // 用map替换forEach，收集所有请求的Promise为数组
      const promiseArr = Books.map(book => {
        console.log(book + "👼👼🧔")
        // 必须return每个axios请求的Promise，才能被map收集到数组中
        return axios.get(`https://openlibrary.org/search.json?q=${encodeURIComponent(book)}`)
      })
      // 传入Promise数组到Promise.all
      const responseList = await Promise.all(promiseArr)
      // 处理返回结果示例
      const result = responseList.map(res => res.data)
      setBookList(result)
      console.log("所有请求完成：", result)
    }

    fetchBookInfo()
    console.log("outside")
  }, []) // 必须添加空依赖数组，避免useEffect无限重复执行

  // 你的其他组件逻辑...
}

• 拼接请求URL时，用encodeURIComponent()处理书名参数，避免书名中的特殊符号（空格、标点等）导致请求路径错误
• 原代码中导入的q库相关内容没有使用，可以移除无用导入减少打包体积
• 建议给请求添加catch错误捕获逻辑，避免单个请求失败导致整个Promise.all终止
• 可以根据业务需要对返回结果做去重、筛选处理

内容的提问来源于stack exchange，提问作者Yasaman Forouzesh