调用public文件夹api.js中fetchAPI函数提示未定义的问题

1. 确认api.js里的函数已全局暴露 #

fetchAPI必须挂载到window对象上，否则React组件无法访问到它。正确写法如下：

// public/api.js
function fetchAPI(data) {
  // 你的业务逻辑
}
// 关键：将函数挂载到全局window对象
window.fetchAPI = fetchAPI;

如果省略这一步，即便script标签引入正确，组件里也调用不到该函数。

2. 检查index.html的script标签配置 #

• 路径要准确：若api.js在public根目录，script标签需写为<script src="/api.js"></script>，开头的斜杠不能省略，避免相对路径导致文件查找失败。
• 加载顺序要正确：这个script标签必须放在React打包后的主脚本之前，确保React组件运行时，api.js已经加载完成。示例：

<!-- index.html -->
<script src="/api.js"></script>
<!-- React的主脚本需放在后面 -->
<script src="/static/js/main.xxx.js"></script>

3. React组件里明确调用全局的fetchAPI #

组件中不能直接写fetchAPI()，必须通过window.fetchAPI调用，避免作用域隔离问题：

import { useEffect } from 'react';
import { useFormik } from 'formik';

function MyForm() {
  const formik = useFormik({
    initialValues: { /* 表单初始化值 */ },
    onSubmit: (values) => {
      window.fetchAPI(values)
        .then(res => console.log('请求成功:', res))
        .catch(err => console.error('请求失败:', err));
    },
  });

  useEffect(() => {
    // useEffect钩子中同样需添加window前缀
    window.fetchAPI({ test: 'demo data' });
  }, []);

  return (
    <form onSubmit={formik.handleSubmit}>
      {/* 表单内容 */}
    </form>
  );
}

export default MyForm;

4. 验证静态资源可正常访问 #

如果使用Create React App，public文件夹下的文件属于静态资源，直接访问http://localhost:3000/api.js，若能看到文件内容则路径无误；若返回404，需检查文件名、路径拼写是否正确。

5. 排除ES模块冲突 #

如果api.js中使用了export function fetchAPI这类ES模块语法，但index.html里用普通script标签引入，函数不会全局暴露。这种情况要么改成全局挂载的写法，要么将api.js移到src目录下，在组件中通过import { fetchAPI } from './api.js'引入。

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