React Redux中组件调用异步Thunk Action报错，如何渲染子组件？

报错原因 #

你的fetchData是Redux Thunk的Action Creator，它返回的是接收dispatch参数的异步函数，而非直接返回Promise。直接调用fetchData("foo")得到的是这个函数，自然没有.then方法，这就是报错的核心原因。

修复步骤 #

1. 用useDispatch派发Thunk Action #

从react-redux导入useDispatch，通过它来派发Thunk Action。dispatch会返回Thunk执行后的Promise，这样就能正常使用.then或await处理异步结果。

2. 优化Action的异步逻辑 #

原Action里await和.then/.catch混用，且存在未声明的全局变量data，建议改用try/catch写法，逻辑更清晰且避免变量污染。

3. 正确切换加载状态 #

在Thunk执行完成（无论成功或失败）后，调用状态更新函数关闭加载状态，确保能正常渲染ChildModal。

修改后的完整代码 #

Action代码 #

// 假设你已定义该请求触发的Action
const fetchDataRequest = () => ({ type: 'FETCH_DATA_REQUEST' });

const fetchData = (name) => {
  return async (dispatch) => {
    dispatch(fetchDataRequest());
    let data;
    try {
      const response = await axios.get(url); // 替换为你的实际API地址
      data = response.data; // 通常取response.data，按需调整
      // 若需将数据存入Redux，这里可派发成功Action
      // dispatch(fetchDataSuccess(data));
    } catch (error) {
      console.error('数据获取失败:', error);
      data = [];
    }
    return data;
  };
};

组件代码 #

import { fetchData } from "../../Actions/userActions";
import { useEffect, useState, forwardRef } from "react";
import { useDispatch } from "react-redux"; // 新增导入

export const ParentModal = forwardRef((props, ref) => {
  console.log(" type:" + typeof fetchData);
  
  const [initialLoading, setInitialLoading] = useState(true);
  const dispatch = useDispatch(); // 获取dispatch方法

  useEffect(() => {
    // 派发Thunk并处理异步结果
    dispatch(fetchData("foo"))
      .then((res) => {
        console.log("result arrived!!!", res);
        setInitialLoading(false);
      })
      .catch((err) => {
        console.error('请求处理失败:', err);
        setInitialLoading(false); // 出错也关闭加载，避免卡死
      });
  }, [dispatch]); // 依赖项添加dispatch
  
  return initialLoading ? (
    <mui.CircularProgress className="smloader" />
  ) : ReactDOM.createPortal(
    <div>
      <ChildModal open={true} /> {/* 建议用状态控制open，原代码open变量未定义需补充 */}
      {/* 其他组件内容 */}
    </div>,
    document.body // Portal需指定挂载目标，原代码缺失补充
  );
});

额外注意事项 #

• 若需将获取的数据传递给ChildModal，可通过Redux的useSelector从Store中读取，或直接在.then中把数据存入组件状态。
• useEffect的回调不要直接用async（React期望回调返回清理函数或undefined），上述写法将异步逻辑放在内部，避免了这个问题。

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