React中如何导出JS文件内通过axios调用生成的数组供其他文件使用

问题根因 #

• 你定义的b函数没有向外层返回任何值，return myarray写在useEffect的回调函数内，useEffect的返回值仅用于组件卸载时的清理逻辑，不会作为外层函数的返回值
• axios请求是异步操作，你无法同步拿到请求返回的数组结果，必须用异步逻辑处理
• React Hook（useEffect、自定义的userSessionStorage）只能在React函数组件/自定义Hook中调用，如果你直接在非React上下文执行会直接抛出语法错误
• 你在a.js中导入的b本身是一个函数，你没有执行它就直接打印，就算逻辑正确也会打印函数本身而不是数组结果
• 原代码userSessionStorage('details' null)缺少参数分隔逗号，存在语法错误

解决方案1：封装为普通异步请求工具（无React Hook依赖） #

适合不需要在React组件上下文使用的场景，直接封装通用请求逻辑：

修正后b.js代码 #

import axios from 'axios'

const getMyArray = async () => {
  // 直接从sessionStorage读取token，不需要Hook
  const userDetails = JSON.parse(sessionStorage.getItem('details') || '{}')
  const token = userDetails.token
  const myarray = []

  try {
    // 发起带token的axios请求
    const res = await axios.get('替换为你的实际接口地址', {
      headers: {
        Authorization: `Bearer ${token}`
      }
    })
    // 替换为你实际的判断逻辑
    const condition = res.data.condition
    if(condition){
      myarray.push(res.data.data1)
    } else {
      myarray.push(res.data.data2)
    }
    return myarray
  } catch (err) {
    console.error('接口请求失败', err)
    return myarray
  }
}

export default getMyArray

修正后a.js代码 #

import getMyArray from "./b.js";

// 异步调用获取数组
const fetchArray = async () => {
  const resultArray = await getMyArray()
  console.log(resultArray) // 可正常拿到返回的数组
}
fetchArray()

解决方案2：封装为React自定义Hook（供React组件使用） #

适合在React函数组件中使用的场景，符合Hook调用规则：

修正后b.js代码 #

import { useState, useEffect } from 'react'
import axios from 'axios'

// 自定义Hook命名必须以use开头
const useMyArray = () => {
  const [token] = userSessionStorage('details', null)
  const [myArray, setMyArray] = useState([])

  useEffect(() => {
    // useEffect内写异步请求逻辑
    const fetchData = async () => {
      if(!token) return
      try {
        const res = await axios.get('替换为你的实际接口地址', {
          headers: {
            Authorization: `Bearer ${token}`
          }
        })
        const tempArr = []
        const condition = res.data.condition
        if(condition){
          tempArr.push(res.data.data1)
        } else {
          tempArr.push(res.data.data2)
        }
        setMyArray(tempArr)
      } catch (err) {
        console.error('接口请求失败', err)
      }
    }
    fetchData()
  }, [token]) // token变化时自动重新请求

  return myArray // 外层返回数组状态
}

export default useMyArray

修正后a.js（必须为React函数组件）代码 #

import useMyArray from "./b.js";

const AComponent = () => {
  const myArray = useMyArray()
  console.log(myArray) // 组件渲染时可正常拿到请求后的数组
  return <div>你的组件业务逻辑</div>
}

export default AComponent

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