2021-3-24 react hooks 中useEffect 与 promise.all 激情碰撞_react native useeffect promiseall-CSDN博客

本文探讨了在React Hooks中使用useEffect与Promise.all的结合过程中遇到的错误，详细解释了错误的原因，即在useEffect中直接执行导致Promise对象被打印。通过实例展示了如何正确地使用Promise.all进行批量有序保存操作，并分析了接口返回数据的处理方式，以实现更高效的并发处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

   async function add() {
      const arrs = []
      await printArr.map((id) => {
        getReimDetails({ reimburseId: id }).then((res) => {
          arrs.push(res)
        })
      })
      return arrs
    }
    add()
    console.log(add())

export async function getRemittances(userId) {
  const res = await http.get(
    urls.UPLOAD + '/main/apply/frequently/remittances',
    {
      reimburseUserCode: userId
    },
    'no'
  )
  if (res) {
    const { isSuccess, message, result } = res.data
    if (!isSuccess) {
      Message.error(message)
      return isSuccess
    } else {
      return result
    }
  }
}

错误原因打印add()是一个promise对象

改为以下

 const getReimDetails = (reimburseId) => {
    const param = {
      reimburseId
    }
    return new Promise((resolve, reject) => {
      http
        .get(urls.UPLOAD + '/main/detail', param)
        .then((res) => {
          const { isSuccess, message, result } = res.data

          if (!isSuccess) {
            console.log(message)

            return
          }

          resolve(result)
        })
        .catch((err) => {
          console.log(err)
          reject(err)
        })
    })
  }

  const addListToList = async () => {
      const arr = []

      for (const i of printArr) {
        arr.push(await getReimDetails(i))
      }
      setList(arr)
    }
    addListToList()

批量有序保存接口返回数据

promise.all更佳↓

  useEffect(() => {
    const arrs = []
    const add = async () => {
      for (const i of printArr) {
        await Promise.all([getReimDetails(i), getAuditFlow(i)]).then((arr) => {
          // console.log(arr)
          // setList(arr[0])
          arrs.push(arr[0])
          setAuditList(arr[1])
          setAll(arrs)
          setList(arrs)
        })
      }
    }

    add()
  }, [printArr])