使用serve部署React应用时useEffect钩子未触发的原因及解决方法

问题原因 #

你当前的useEffect写法不符合React规范：useEffect的回调函数不能返回异步函数（Promise）。你的代码中useEffect(() => async () => { ... })相当于让effect返回了一个async函数，而React要求effect的返回值只能是用于清理操作的同步函数，或者undefined。

开发环境下React的警告可能未被严格拦截，所以代码能正常运行；但生产构建（npm run build）后，React会严格遵循规范，这种错误写法会直接导致effect无法触发。

正确实现方式 #

以下是几种页面首次加载时获取数据的正确写法，适配开发和生产环境：

方案1：在effect内部定义异步函数并调用 #

useEffect(() => {
  const fetchItems = async () => {
    const items = await getItems();
    setItems(items);
  };

  fetchItems();
}, []); // 空依赖数组确保仅在组件挂载时执行

方案2：使用立即执行的异步函数（IIFE） #

useEffect(() => {
  (async () => {
    const items = await getItems();
    setItems(items);
  })();
}, []);

方案3：基于Promise链式调用（无需async/await） #

useEffect(() => {
  getItems()
    .then(items => setItems(items))
    .catch(err => console.error('数据获取失败:', err));
}, []);

可选：添加请求取消的清理逻辑 #

如果需要在组件卸载时取消未完成的请求，避免内存泄漏，可以使用AbortController：

useEffect(() => {
  const abortController = new AbortController();

  const fetchItems = async () => {
    try {
      // 假设getItems支持接收signal参数
      const items = await getItems({ signal: abortController.signal });
      setItems(items);
    } catch (err) {
      // 忽略取消请求的错误
      if (err.name !== 'AbortError') {
        console.error('数据获取失败:', err);
      }
    }
  };

  fetchItems();

  // 组件卸载时取消请求
  return () => abortController.abort();
}, []);

修改后，无论在开发环境（npm start）还是生产构建后用serve -s build部署，useEffect都会正常触发，表现和Node服务器运行时一致。

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