React中QnaNew组件history.push跳转失效但Login/Join组件正常如何解决

AI 小北

2026-10-10

问题根因

你定义的createPost action 仅接收formProps一个参数，没有接收你在QnANew组件里传入的第二个回调函数，因此你写在组件里的this.props.history.push逻辑完全不会执行。
虽然你在createPost action 内部已经写了history.push('/qna')，但没有加错误捕获逻辑，一旦POST请求出错，后续的跳转代码也不会执行。

修复方案（二选一即可）

方案1：使用action内置的history跳转（不需要组件传回调）

修改actions/index.js里的createPost逻辑，增加错误捕获：

export const createPost = (formProps) => async (dispatch) => {
  try {
    const response = await qna.post('/qnanew', { ...formProps });
    dispatch({ type: CREATE_QNA, payload: response.data });
    history.push('/qna');
  } catch (e) {
    console.error('创建帖子失败：', e);
    // 可在此处扩展错误提示的dispatch逻辑
  }
};

然后修改QnANew.js里的onSubmit逻辑，删掉无用的回调：

onSubmit = (formProps) => {
  this.props.createPost(formProps);
};

方案2：保留组件传回调的逻辑（和现有join方法逻辑对齐）

修改actions/index.js里的createPost，接收第二个callback参数并在请求成功后执行：

export const createPost = (formProps, callback) => async (dispatch) => {
  try {
    const response = await qna.post('/qnanew', { ...formProps });
    dispatch({ type: CREATE_QNA, payload: response.data });
    callback?.(); // 执行组件传入的跳转回调
  } catch (e) {
    console.error('创建帖子失败：', e);
  }
};

这个方案不需要修改QnANew组件里的原有onSubmit逻辑，修改后即可正常跳转。