在 Redux 表单中分派操作后尝试重定向时出错

Question

那是我的 submitTask.tsx 这是一个单独的文件

import React from "react";
import { SubmissionError } from "redux-form";
import { Redirect } from "react-router-dom";
import { Dispatch } from "redux";
import { addNewTask } from "../actions/Task";

const submitTask = (values: any, dispatch: Dispatch) => {
  if (!values.category || !values.description) {
    throw new SubmissionError({
      _error: "All fields are required!"
    });
  } else {
    const taskValue = {
      id: values.id,
      category: values.category,
      description: values.description,
      createdAt: values.createdAt
    };

    dispatch(addNewTask(taskValue));
    return <Redirect to="/tasks" />; //this line causing problem when i add it 
  }
};

export default submitTask;

这是一条来自 TaskForm.tsx 的错误消息，有人知道这里出了什么问题吗？

image for error in VS code

Answer 1

因为函数 return 一些值或数据，而不是 JSX。

要重定向，您应该尝试类似的方法：

myForm = () => {
    if(condition from redux store or local state){
        return <Redirect to={"/tasks"}/>
    }

    return (
        <ReduxForm onSubmit = {some function}/>
    );
}

在 Redux 表单中分派操作后尝试重定向时出错

Error when trying to redirect after dispatching an action in Redux forms

reactjs

redirect

redux

submit

redux-form