reactjs - 根据 props 状态进行条件重定向

Question

如果 props.fields 的长度为零，我想重定向页面。但问题是它被渲染了两次，所以当它为空时，它会被重定向并且不会等待第二次。 我是 React 新手，如果有人能帮助我，那就太好了。我花了几个小时来解决这个问题。

import React, { Component, useEffect, useState } from 'react'
import Field from './field'
import {Redirect} from 'react-router-dom'





export default function FieldList(props) {

    const [redirect,setRedirect] = useState(false);
    useEffect(()=>{
        if(props.fields.length===0) {
            setRedirect(true)
        }
        else
            setRedirect(false)
    },[props.fields])
    
         return (
                <div>
                <h1 style={{textAlign:"center", margin:"20px 0"}}>{props.text}</h1>
                
                <div className='field-list'>
                {props.fields.map((name) => (
                    <Field name={name}  />
                ))}
                </div>
                {redirect && <Redirect to={'/'} />}
            </div>
            )
        
}

Answer 1

您可以使用自定义浏览器历史记录或使用 react-router-dom 的 useHistory Hook 来代替 Redirect

使用useHistory钩子(Hook)

import {useHistory} from 'react-router-dom'

然后在useEffect

   useEffect(()=>{
       if(props.fields.length===0) {
        useHistory().push('/')
        }
      },[props?.fields]
    )

如果您不想使用它，可以按照以下步骤创建自定义浏览器历史记录

首先创建一个文件并将其命名为History.js

添加这行代码

import { createBrowserHistory } from "history";
export default createBrowserHistory(); 

然后将其导入到文件中

  import history from "FILE_PATH"

   useEffect(()=>{
       if(props.fields.length===0) {
        history.push('/')
        }
      }
    )