我正在制作一个注册表单，希望在注册成功时将用户导航到登录页。在注册页上，我希望获得更新的状态。在signup处理程序中，我没有实时获得更新的状态（status），尽管状态在函数外部更新。
注册组件

const Signup = () => {
  const [name, setName] = useState('')
  const [email, setEmail] = useState('')
  const [phone, setPhone] = useState('')
  const [password, setPassword] = useState('')

  const navigate = useNavigate();
  const token = localStorage.getItem("token");
  useEffect(() => {
    if (token) {
      navigate('/home')
    }
  }, [])

  const signupForm = [
    {
      label: "Name",
      InputIcon: FaUserAlt,
      width: '100%',
      handleInput: (e) => {
        setName(e.target.value)
      }
    },
    {
      label: "Email",
      InputIcon: FaEnvelope,
      width: '100%',
      handleInput: (e) => {
        setEmail(e.target.value)
      }
    },
    {
      label: "Phone",
      InputIcon: FaPhoneAlt,
      width: '100%',
      handleInput: (e) => {
        setPhone(e.target.value)
      }
    },
  ]

  const dispatch = useDispatch()

  const { status } = useSelector((state) => {
    return state.auth;
  })

  console.log(status);

  const signup = async (e) => {
    e.preventDefault()

    const user = {
      name,
      email,
      phone,
      password
    }

    await dispatch(signupUser(user))
    console.log(status);
    // if (status == 'success') {
    //   navigate('/')
    // }
  }

  return (
    <div className='form-container'>
      <img src={userImage} alt='user' />
      <form>
        <h2>Sign up</h2>
        {
          signupForm.map((data, i) => {
            return <OutlinedTextField
              key={i}
              style={{ width: data.width }}
              label={data.label}
              InputIcon={data.InputIcon}
              onChangeFunc={data.handleInput}
            />
          })
        }

        <OutlinedPasswordTextField
          style={{ width: '100%' }}
          label={'Password'}
          InputIcon={FaLock}
          onChangeFunc={(e) => setPassword(e.target.value)}
        />

        <div className='btn-container'>
          <AppButton text={status == 'loading' ? <CircularProgress color='inherit' size="15px" /> : 'Sign up'}
            disabled={status == 'loading' ? true : false}
            onClickFunc={signup}
            style={{ width: '80px' }}
          />

          <Link to="/">Login</Link>
        </div>
      </form>
    </div>
  )
}

身份验证切片

const STATUSES = {
  SUCCESS: 'success',
  LOADING: 'loading',
  FAIL: 'fail'
}

export const signupUser = createAsyncThunk('user/signup', async (user) => {
  const data = await axios.post('http://localhost:5000/api/signup', user)
    .then(res => {
      console.log(res.data);
    })
    .catch(err => {
      toast.error(err.response.data.message)
      throw new Error(err.response.data.message)
    })
  console.log(data);
  return data
})

const productsSlice = createSlice({
  name: 'product',
  initialState: {
    data: [],
    status: STATUSES,
    loading: false,
  },
  extraReducers: (builder) => {
    builder.addCase(signupUser.pending, (state, action) => {
      console.log(action, state)
      state.status = STATUSES.LOADING
    })
    builder.addCase(signupUser.fulfilled, (state, action) => {
      console.log(action, state)
      state.status = STATUSES.SUCCESS
      state.data = action.payload
    })
    builder.addCase(signupUser.rejected, (state, action) => {
      console.log(action, state)
      state.status = STATUSES.FAIL
    })
  }
})