时间戳

首页 > 解决方案 > 反应太多的重新渲染

reactjs - 反应太多的重新渲染

问题描述

我知道关于这个错误有多个问题，但我试图为这个特定问题找到解决方案。

在子组件中，我获取用户的地理位置并在数据到达时返回一个对象。

export default () => {
  const [location, setLocation] = useState({
    loaded: false,
    coordinates: { lat: "", lng: "" },
  });

  const onSuccess = (location) => {
    setLocation({
      loaded: true,
      coordinates: {
        lat: location.coords.latitude,
        lng: location.coords.longitude,
      },
    });
  };

  const onError = (error) => {
    setLocation({
      loaded: true,
      error: {
        code: error.code,
        message: error.message,
      },
    });
  };

  useEffect(() => {
    if (!("geolocation" in navigator)) {
      onError({
        code: 0,
        message: "Geolocation not supported",
      });
    }

    navigator.geolocation
      .getCurrentPosition(onSuccess, onError)
  }, []);

  return location;
};

在我的父组件中，我想使用 React hooks 更新我的状态

import { LocateUser } from "../components";

export default () => {
  const [userPos, setUserPos] = useState({ lat: "", lon: "" });
  const location = LocateUser();

  if (location.loaded) {
     console.log(location.coordinates.lat);
     setUserPos({ // this creates the error
       lat: location.coordinates.lat,
       lon: location.coordinates.lng,
     });
  }

  return (
    <React.Fragment>
        { location.loaded ? JSON.stringify(location) : 'No location found' }
    </React.Fragment>
  );
}

我已经尝试过使用 useEffect 和其他解决方法，但没有找到使其工作的解决方案。问题是第一次加载子组件时，地理位置响应为空，稍后它会返回带有数据的对象。从子组件获取响应并更新父组件状态的解决方案是什么？提前致谢

标签： reactjsgeolocationreact-hooks

解决方案

包装useEffect另一个

useEffect(() => {
  if (location.loaded) {
     console.log(location.coordinates.lat);
     setUserPos({
       lat: location.coordinates.lat,
       lon: location.coordinates.lng,
     });
  }
}, [location]) // location inside dependency array of the side effect

以便对似乎是自定义挂钩的location返回的更新进行LocateUser()“侦听”并调用副作用来更新父组件的状态。

推荐阅读