反应函数组件中的多个返回不起作用答案

【问题标题】：multiple returns in a react function component isn't working反应函数组件中的多个返回不起作用
【发布时间】：2021-12-27 17:22:53
【问题描述】：

在处理我的 react 项目时，我使用了命令 <Redirect />，直到昨天一切都很好，但现在我注意到不是主要返回的返回，lambda 函数中的返回不起作用并且'不更改 URL。

示例代码：

const Register = () => {
   const [errorMessage, setError] = useState('');
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [full_name, setFullname] = useState('');

    const submit = async (e) => {
        e.preventDefault();
        const userDetails = {email, full_name, password};
        try{
            await axios.post('register', userDetails);
            return <Redirect to={''} />; // isn't working.
        }catch (error){
            setError(error.response.data.error);
        }
    }
    
    return(

这意味着只有我复制的最后一行中的最后一个返回正在工作，并且那个在发布请求之后不是。即使我尝试写像return (<div></div>); 这样的东西，它也不起作用。如果有人可以提供帮助，我会很高兴，如果解释不清楚，我会提前道歉，这是我第一次在这里寻求帮助。

【问题讨论】：

post 后面的那个不起作用，因为它正在返回函数，这意味着它将返回，你不能返回一个组件DOM里面的一个函数，我会推荐你使用useState，然后有条件地渲染Redirect Component和最后一个return语句。

标签： reactjs return components

【解决方案1】：

使用重定向时无需使用 return。你这样做是不对的。重定向时，它将重定向到指定的 URL。我看到您甚至没有添加重定向到的路线。如果它只是一个空字符串，它不会做任何事情，除了可能重新渲染页面并且你错误地输入了路由。例如；如果您想在成功注册后重定向到仪表板/主页，请使用 -

const submit = async (e) => {
    e.preventDefault();
    const userDetails = {email, full_name, password};
    try{
        await axios.post('register', userDetails);
       <Redirect to='/' />;
    }catch (error){
       setError(error.response.data.error);
    }
}

为简单起见，我认为您可以使用useNavigate 中引入的react-router-dom v6 进行重定向。你可以像这样使用它 -

import { useNavigate } from "react-router-dom"

const navigate = useNavigate()

const submit = async (e) => {
        e.preventDefault();
        const userDetails = {email, full_name, password};
        try{
            await axios.post('register', userDetails);
            navigate('/')
        }catch (error){
           setError(error.response.data.error);
        }
    }

【讨论】：