Блог

Я создал асинхронную функцию для вызова погодного API, которая вернет отправленную запрошенную информацию. Функция работает нормально, однако, когда я вызываю эту функцию внутри компонента класса, результат возвращается дважды. Это не совсем ошибка, но я бы предпочел, чтобы не было двух вызовов API, если в этом нет необходимости, и мне любопытно, почему этот метод вызывается дважды в первую очередь.

Вот мой код.

  async function submitQuery(props) {  //Incase I decide to add aditional parameters such as city, country etc.. I've decided to place the zip property in an object so I can just  //add additional properties in the submissions object  const submission = {  zip: props,  };   if (!Number(props)) return console.log("this is not a number");   const { error } = await validate(submission);  if (error) return console.log(error.message);   const config = {  method: "get",  url: `https://api.openweathermap.org/data/2.5/weather?zip=${props}amp;appid=${apiKey}`,  headers: {},  };   /*  const query = await axios(config).then(function (response) {  const result = response.data.main;  return result;  });  */   //console.log(query);  return 4; }  

 class WeatherReport extends React.Component {  getResults = async () =gt; {  const result = await submitQuery("08060");  console.log(result);  };   render() {  return (  lt;div className="reportContainer"gt;  lt;WeatherCard getResults={this.getResults} /gt;  lt;/divgt;  );  } }  

  const WeatherCard = ({ getResults }) =gt; {  getResults();  return lt;divgt;lt;/divgt;; };  

Проблема в том , что вы вызываете getResults метод визуализации WeatherCard , переместите его в a useEffect , чтобы он не вызывался каждый раз

 const WeatherCard = ({ getResults }) =gt; {  React.useEffect(() =gt; {  getResults();  }, [getResults]);  return lt;divgt;lt;/divgt;; };