React useState 和 useEffect 没有按预期工作

Question

我有一个用于存储对象的状态和两个 useEffect。第一个 useEffect 在第一次渲染中只出现一次，而第二个出现在 'toFetch' 状态改变时。此外，toFetch 的初始值是 Ankara 的坐标并存储在对象中。首先，useffect 判断用户是否授予了地理定位权限。如果允许，则设置为获取当前位置；如果不是，则什么都不做。这次，第二个 useEffect 起作用了。并基本上从 API 获取数据并设置“已选择”状态。然而，当用户允许地理定位时，所选状态继续使用安卡拉坐标。有什么问题吗？

这是我的代码

function Contex({ children }) {
  let obj = { lat: 39.57, lng: 32.53 }; // coordinates of ankara
  const [weather, setWeather] = useState([]);
  const [selected, setSelected] = useState({});
  const [toFetch, settoFetch] = useState(obj);
  const [loading, setloading] = useState(false);


  useEffect(() => {
    const initialSetup = () => {
      const sb = (pos) => {
        const {
          coords: { latitude, longitude },
        } = pos;


         settoFetch((prev) => {
           return { type: "single", lat: latitude, lng: longitude };
         });

      };
      const eb = (err) => {};

      navigator.geolocation.getCurrentPosition(sb, eb, {
        enableHighAccuracy: true,
      });
    };
    initialSetup();
  }, []);

  useEffect(() => {
    const den = async () => {
      setloading(true);
      let x = toFetch;
      if (toFetch.type === "country") x = await getCountryStates(toFetch.name);
      const weatherData = await dataProvider([x].flat());
      setWeather(weatherData);
      setSelected(weatherData[0]);
      setloading(false);
    };

    den();
  }, [toFetch]);

  return (
    <context.Provider
      value={{
        weather,
        setSelected,
        selected,
        settoFetch,
        loading,
        toFetch,
      }}
    >
      {children}
    </context.Provider>
  );
}

export { Contex, context };

Answer 1

function Contex({ children }) {
  let obj = { lat: 39.57, lng: 32.53 }; // coordinates of ankara
  const [weather, setWeather] = useState([]);
  const [selected, setSelected] = useState({});
  const [toFetch, settoFetch] = useState(obj);
  const [loading, setloading] = useState(false);


  useEffect(() => {
    const initialSetup = () => {
      const sb = (pos) => {
        const {
          coords: { latitude, longitude },
        } = pos;


         settoFetch((prev) => {
           return { type: "single", lat: latitude, lng: longitude };
         });

      };
      const eb = (err) => {};

      navigator.geolocation.getCurrentPosition(sb, eb, {
        enableHighAccuracy: true,
      });
    };
    initialSetup();
  }, []);

  useEffect(() => {
    const den = async () => {
      setloading(true);
      let x = toFetch;
      if (toFetch.type === "country") x = await getCountryStates(toFetch.name);
      const weatherData = await dataProvider([x].flat());
      setWeather(weatherData);
      setSelected(weatherData[0]);
      setloading(false);
    };

    den();
  }, [toFetch.lat, toFetch.lng]); // Using an object in your useEffect dependency array also causes the infinite loop problem.

  return (
    <context.Provider
      value={{
        weather,
        setSelected,
        selected,
        settoFetch,
        loading,
        toFetch,
      }}
    >
      {children}
    </context.Provider>
  );
}

export { Contex, context };