在 useEffect (React) 中获取未定义的值

Question

以下函数获取用户的当前位置：

  const getCurrentLocation = () => {
    fetch("https://ipinfo.io/json?token=$TOKEN")
      .then((response) => response.json())
      .then((jsonResponse) => {
        console.log(jsonResponse)
        return jsonResponse;
      });
  };
  useEffect(() => {
    console.log(getCurrentLocation());
    }, []);

登录 useEffect 显示 undefined，它首先出现在控制台中，然后 jsonResponse 在控制台中显示下一个相应的对象。这是为什么？

Answer 1

getCurrentLocation 函数未返回任何内容。尝试将位置保存在状态中，以便您可以在需要时访问它：

const [currentLocation, setCurrentLocation] = useState(null);

const getCurrentLocation = () => {
  fetch("https://ipinfo.io/json?token=$TOKEN")
    .then((response) => response.json())
    .then((jsonResponse) => {
      setCurrentLocation(jsonResponse); // <- save the location in state
    });
};

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

return <div>{currentLocation}</div>

如果您需要 useEffect 中的位置，您可以这样做：

useEffect(() => {
  if (currentLocation !== null) {
    // ...
  }
}, [currentLocation])

Answer 2

getCurrentLocation 没有 return 任何东西，这就是为什么你有 undefined.

此外，fetch returns a Promise，也就是异步，意思是你不会立即得到结果，必须传一个回调给then才能得到结果可用时。

const getCurrentLocation = () => {
  return fetch("https://ipinfo.io/json?token=$TOKEN")
    .then(response => response.json());
};

useEffect(() => {
  getCurrentLocation()
    .then(location => console.log(location));
}, []);

Answer 3

你可以简单地使用async/await来获得响应，看看这个：

 const getCurrentLocation = async () => {
    const result = await fetch("https://ipinfo.io/json?token=$TOKEN");
    return result.json();
  };



 const handleGetLocation = async () => {
   const result = await getCurrentLocation();
   console.log(result);
  };

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

在 useEffect (React) 中获取未定义的值

Getting undefined value in useEffect (React)

reactjs

asynchronous