应用程序不会将信息打印到控制台

Question

EDIT：为了更清楚，更新了问题1。

所以，这可能是一个愚蠢的问题，但我们开始了。

几个月前，在课堂上，我们写了一个简单的天气应用程序，打算进一步开发它

我的问题是：

1. 应该在哪里以及如何调用/调用函数
2. 如何执行代码，以便应用程序在控制台中打印从两个API接收的信息
3. 一旦信息被打印出来，如何在前端进行操作，就像在一张简单的卡片上显示一样

这是主要代码：

import axios from 'axios';
import {
TimeStampToWeekDay,
TimeStampToHoursMinutes
} from '../utils/dateHelpers';

const weatherAPIKey = process.env.WEATHER_API_KEY
const weatherAPI = axios.create({
baseURL: 'https://api.openweathermap.org/data/2.5/',
headers: {'Content-Type': 'application/json'}
});
const locationAPIKey = process.env.LOCATION_API_KEY
const locationAPI = axios.create({
baseURL: 'https://api.opencagedata.com/geocode/v1/',
headers: {'Content-Type': 'application/json'}
});

export const getDailyWeatherByCountry = async ({city, country}, success, failure) => {
const {data: locData} = await locationAPI.get(`json?q=${country}, ${city}&key=${locationAPIKey}`);
const {lat, lng} = locData.results[0].geometry;
const {data: weatherData} = await weatherAPI.get(`onecall?lat=${lat}&lon=${lng}&units=metric&exclude=hourly,alerts,current,minutely&appid=${weatherAPIKey}`)
console.log(weatherData.daily);
const formatedDays = weatherData.daily.map(({temp, clouds, dt, sunrise, sunset, wind_deg, wind_speed}) => ({
temp: temp.day,
cloudLevel: clouds,
weekDay: TimeStampToWeekDay(dt),
sunrise: TimeStampToHoursMinutes(sunrise),
sunset: TimeStampToHoursMinutes(sunset),
windDeg: wind_deg,
windSpeed: wind_speed
}))
console.log(weatherData.daily[0])
console.log(formatedDays[0])    
}

这里还有日期助手代码(如果需要(：

const days = ['Sunday', 'Monday', 'Tueday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
export const TimeStampToWeekDay = (timestamp) =>{
return days[new Date(timestamp * 1000).getDay()];
}
export const TimeStampToHoursMinutes = (timestamp) => {
const date = new Date(timestamp * 1000);
return `${date.getHours()}: ${date.getMinutes()}`;
}

我也把整个项目上传到了GitHub上，如果这样可以更容易地分析的话

Github链接

Answer 1

我在评论中分享了charlietfl的感受，但我也想提供帮助，所以我们开始吧。

1. 在App.jsx中，您应该添加一个componentDidMount方法。只要您的组件安装在DOM中，就会调用此方法(有关更多信息，请参阅第2点(。在这个方法中，您可以调用getDailyWeatherByCountry，它将成功地console.log((

看看React的componentDidMount方法，因为它是用老方法做的

您可以在App.jsx中使用MaterialUI等框架来显示内容，也可以直接使用旧的HTML方式

我会在您提供更多详细信息时更新我的答案。