React中import语句非模块环境报错，求助医院API调用问题

嘿，我看你遇到了两个缠人的问题：一个是模块导入的语法报错，另一个是React组件的代码逻辑有问题。咱们一步步拆解解决：

一、先把React组件的代码bug修好 #

你的components文件夹里的文件有几个明显的问题，这些问题可能是触发模块报错的导火索：

1. Hook用错地方+无限循环 #

useEffect是React的Hook，必须放在React组件函数的顶层调用，而且你在loadHospitals里递归调用自己，这会导致无限循环，浏览器直接炸锅。另外，这个文件应该导出一个React组件，不是普通函数哦。

2. 导入和调用对不上号 #

你导入了getHospitals，但代码里却调用HospitalsAPI.getNews()——你的API文件里根本没有getNews方法，只有getHospitals，这明显是手滑写错了。

给你改好的组件代码：

// 建议给文件起个明确的名字，比如 HospitalLoader.jsx
import React, { useEffect } from "react";
import hospitalApi from "../other/api"; // 改个名字，更直观

export default function HospitalLoader() {
  useEffect(() => {
    // 这里调用API，别再递归调用组件本身啦
    hospitalApi.getHospitals()
      .then(res => {
        console.log("拿到医院数据啦：", res);
      })
      .catch(err => console.error("请求出错了：", err));
  }, []); // 空数组确保只在组件挂载时跑一次

  return <div>正在加载医院数据...</div>; // React组件必须返回JSX，不然会报错
}

二、搞定"Cannot use import statement outside a module"报错 #

如果修好组件代码后还是弹这个错，那得检查模块配置：

1. 确认项目环境支持ES模块 #

如果你是用Create React App、Vite这些主流工具创建的React项目，默认已经支持import/export，不用额外配置。但如果是自己手动搭的项目：

• 在项目根目录的package.json里加一行"type": "module"，告诉Node.js这是ES模块项目。
• 确保文件扩展名是.jsx（React组件）或.js，别用.cjs（那是CommonJS模块的扩展名）。

2. 检查API文件的写法 #

你的API文件本身没问题，但确保它的扩展名是.js，路径也没写错：

// other/api.js
import axios from "axios";

export default {
  getHospitals: function() {
    return axios.get("https://services1.arcgis.com/Hp6G80Pky0om7QvQ/arcgis/rest/services/Urgent_Care_Facilities/FeatureServer/0/query?where=1%3D1&outFields=*&outSR=4326&f=json");
  }
};

3. 核对导入路径 #

确保../other/api这个相对路径是对的——如果other文件夹和components是同级的，那没问题；如果不是，得调整成正确的路径（比如../../other/api之类的）。

小Tips #

• 给文件起个靠谱的名字，别让自己后续看代码一脸懵；
• 用console.error打错误信息，控制台里会标红，更容易发现问题；
• 如果你的Node.js版本太老（比如v12及以下），可能对ES模块支持不好，建议升级到v18+的LTS版本。

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