我如何重定向在 reactjs 中提交我的表单并使用 formik

Question

the redirect is not working, how can I redirect am using functional components.

const [redirect,setredirect]=useState(false);
const onSubmit = (values,{resetForm}) => {
    console.log('Form data', values);
    setredirect(true);
    if(redirect)
    {
        return <Redirect to='/' />
    }
          

Answer 1

You can use history.push to redirect.

const history = useHistory()
history.push('/')

---

Btw, the condition to check if redirect is true won't work since setRedirect is asynchronous. You don't need the redirect piece of state at all.

const onSubmit = async (values) => {
  // Send an API request with the values
  // await makeAPICall(values)
  history.push('/')
};

Answer 2

The problem is that setting the state does not (necessarily) change it synchronously, so if you check the state right after you set it, it may still contain the old value. In react, setting the state does not immediately mutate the state, but creates a pending state transition. If you need to reliably access the new state right after setting it, just save it to a temporary variable:

let shouldRedirect = true; // I'm assuming this is not hard-coded or the if statement makes no sense.
setredirect(shouldRedirect);
if (shouldRedirect) {
  // Do something 
}