ReactJS Hooks. TypeError: Object(...) is not a function

Question

我是 reactJS 的新手，我正在尝试使用 React Hooks 开发一个天气应用程序。 useEffect 钩子无限运行，连依赖都跟以前一样。所以我决定使用 useCallBack 钩子，但是它显示错误。

代码如下：

import React,{useState,useEffect,useCallBack} from 'react';
import axios from 'axios';

const WeatherApp = () =>{
  const [weatherData,setWeatherData] = useState({
    latitude:1,
    longitude:0,
    city:'',
    country:'',
    description:'',
    temperature:'',
    apiKey:"96f70a610a2b066259b75fc8d23eab98",
    icon:''
  });

  const getWeatherByCoords = useCallBack(()=>{
    let api=`http://api.openweathermap.org/data/2.5/weather?lat=${weatherData.latitude}&lon=${weatherData.longitude}&appid=${weatherData.apiKey}`;

    axios.get(api)
      .then(res=>{
        const data = res.data;
        setWeatherData(pre=>({...pre,
          country:data.sys.country,
          city:data.name,
          temperature:data.main.temp,
          description:data.weather[0].description
        }));
        console.log(weatherData);

      })
      .catch(error=>errorHandler(error));
  },[weatherData]);


  const errorHandler = error=>{
    console.log(error);
  }
 useEffect(()=>{
   // const interval = setInterval(()=>{
     if(navigator.geolocation){
     navigator.geolocation.getCurrentPosition(position=>{
       setWeatherData({...weatherData,
         latitude:position.coords.latitude,
         longitude:position.coords.longitude});
       getWeatherByCoords();
     },error=>errorHandler(error),{timeout:10000});
   }
 // },1000);
   // return(()=> clearInterval(interval));
},[getWeatherByCoords]);

  // fetch(`api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${key}`)

  return(
    <div>
      <div>
        <h1>City</h1>
        <h2>Date</h2>
        <h3>Description</h3>
      </div>
      <div>
        <img alt='This is an img'></img>
        <h2>Temperature</h2>
        <p> <span>°C</span>|<span>°F</span></p>
      </div>
    </div>
  )
};

export default WeatherApp;

错误：

如果我使用useMemo，错误会变成：getWeatherByCoords 不是一个函数。我很迷茫。我花了一整天的时间。如果有人能帮忙，非常感谢。

Answer 1

useEffect 和 useCallback 将运行只要依赖关系发生变化。

因此，如果您的依赖项是要在钩子内更改的依赖项，它将触发一个循环。

你的情况不需要useCallback。

只需触发 useEffect 中的 axios API 方法，然后在没有任何依赖的情况下设置 weatherData 的状态即可。

ReactJS Hooks. TypeError: Object(...) is not a function

ReactJS Hooks. TypeError: Object(...) is not a function

reactjs

react-hooks

usecallback