在以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

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

要重定向，您应该尝试类似的操作：

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

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