限制导航以防止浏览器挂起 - React

Question

Throttling navigation to prevent the browser from hanging. See https://crbug.com/882238. Command line switch --disable-ipc-flooding-protection can be used to bypass the protection

这是它抛出的完整警告：

我的代码：

import { login, resetState } from "../../store/auth/authActions";
import { isAuthenticated } from "../../utils/auth";

const Login = ({ history }) => {
  const dispatch = useDispatch();

  //joi schema
  ....

  //react hook form setup
  const {
    register,
    handleSubmit,
    setError,
    clearErrors,
    formState: { errors },
  } = useForm({
    resolver: joiResolver(schema),
  });

  useEffect(() => {
    dispatch(resetState(clearErrors));
    if (isAuthenticated) {

      //AS SOON AS I UNCOMMENT THE NEXT LINE THROWS THE WARNING IN LOOP
      // history.push("/dashboard");
    }
  }, [clearErrors, dispatch, history]);

  const onSubmit = (data) => {
    dispatch(resetState(clearErrors));
    dispatch(login(data));
  };

  // global state
  const serverSideErrors = useSelector((state) => state.auth.errors);

  useEffect(() => {
    Object.entries(serverSideErrors).forEach(([i, v]) => {
      setError(i, {
        message: v[0],
      });
    });
  }, [serverSideErrors, setError]);

return (...)

export default Login;

在这里，您可以看到这一行： history.push("/dashboard"); 这似乎是导致问题的原因。 如果我评论这一行。 该警告将消失。

我也试过：

  useEffect(() => {
    dispatch(resetState(clearErrors));
    if (isAuthenticated) {
      history.push("/dashboard");
    }
  }, []);

但同样的问题。 怎么，我能解决这个问题吗？ 我在这里缺少什么？

Answer 1

我的猜测是dispatch(resetState(clearErrors)); 更改clearErrors引用。 由于clearErrors是同一钩子的依赖项并且它在钩子中发生变化，因此它在循环中被调用，该循环运行history.push("/dashboard"); 反复。

你应该做dispatch(resetState(clearErrors)); 有条件地否则它总是以循环结束。

PS：如果您可以发布此问题的最小回购，我可能会提供更好的帮助。