React项目中如何通过Promise导入其他文件的const常量数据

问题本质 #

你当前的test是一个返回Promise对象的函数，并非可遍历的数组，同步执行的组件渲染逻辑在Promise还没resolve的时候直接调用map方法自然会报错。

代码调整步骤 #

1. 组件侧异步获取数据并存入状态 #

React中处理异步渲染数据需要配合useState存储数据、useEffect触发异步获取逻辑，同时增加空值判断避免数据还没返回时报错：

import { test } from "./test"
import { useState, useEffect } from "react"

function List() {
  // 初始化存储数据的状态，默认是空数组
  const [listData, setListData] = useState([])

  useEffect(() => {
    // 调用异步方法获取数据
    const fetchData = async () => {
      const res = await test()
      setListData(res)
    }
    fetchData()
  }, [])

  return (
    <div className="food">
      {listData.map((value,index) => (
         <div key={index}>
           <p>{value.name}</p>
           {/* 兼容car字段为数组的情况，避免直接渲染数组报错 */}
           <p>{Array.isArray(value.car) ? value.car.join('、') : value.car}</p>
           </div>    
         ))}
    </div>   
  ) 
}
export default List

2. （可选）导出文件调整 #

如果你的异步逻辑只是模拟场景不需要真实异步请求，可以直接导出数组简化逻辑：

export const test = [
  {
    name: "tom",
    car: "tesla"
  },
  {
    name: "sam",
    car: "honda"
  },
  {
    name: "may",
    car: ["toyota", "BMW"],
  }
]

调整后组件就可以不用异步逻辑直接调用test.map遍历。

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