location.js 进入无限循环并再次导航到/Home，这导致 chrome 浏览器限制导航

Question

所以首先有一个 login.js 在用户登录后他被带到 location.js 页面从那里我得到他的位置。但问题是首页渲染超过100-150次导致节流

// 登录.js

const Login = () => {
  const navigate = useNavigate();

  const handleSubmit = (e) => {
    e.preventDefault();
    signInWithEmailAndPassword(auth, email, password)
      .then((userCredential) => {
        const user = userCredential.user;
        navigate("/Location");
        console.log(user);
      })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        setError(errorCode.substring(4));
        console.log(errorCode, errorMessage);
      });
  };

//位置.js

const UpdateLocation = () => {
  const navigate = useNavigate();
  const [currLocation, setCurrLocation] = useState({});
  const { currentUser } = useAuthValue();
  const id = currentUser.uid;

  const getLocation = async () => {
    navigator.geolocation.getCurrentPosition((position) => {
      console.log(position);
      const { latitude, longitude } = position.coords;
      setCurrLocation({ latitude, longitude });
    });

    await updateDoc(doc(db, "Users", id), {
      latitude: currLocation.latitude,
      longitude: currLocation.longitude,
    });
    console.log("Hello");
    navigate("/Home");
  };

  useEffect(() => {
    getLocation();
  }, [currLocation]);
};

我尝试在 useEffect 挂钩中使用依赖数组，但是当我将其保留为空时，位置不会更新为 currLocation useState，我们无法更新数据。 当我在依赖数组中使用 currentLocation 时，同样的导航到主页的问题会重复 100-150 次。

Answer 1

避免在

Location.js

中创建无限循环的解决方法是从

dependency array

挂钩中删除

useEffect

。有了这个，

getLocation

函数在组件安装时只被调用一次。

您还可以将

updateDoc

函数调用移动到

getCurrentPosition

调用中，以便在调用时成功获取用户的当前位置。

例如：

const UpdateLocation = () => {
  const navigate = useNavigate();
  const [currLocation, setCurrLocation] = useState({});
  const { currentUser } = useAuthValue();
  const id = currentUser.uid;

  const getLocation = async () => {
    navigator.geolocation.getCurrentPosition(async (position) => {
      console.log(position);
      const { latitude, longitude } = position.coords;
      setCurrLocation({ latitude, longitude });
      await updateDoc(doc(db, "Users", id), {
        latitude,
        longitude,
      });
      console.log("Hello");
      navigate("/Home");
    });
  };

  useEffect(() => {
    getLocation();
  }, []);
};