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

编辑：为了更清晰，更新了问题1

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

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

我的问题是：

应在何处以及如何调用/调用函数

如何执行代码，以便应用程序在控制台中打印从两个API接收的信息

一旦信息被打印出来，如何在前端操作它，比如在一张简单的卡片上显示

以下是主要代码：

    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])    
}

以下是日期助手代码（如果需要）：

我还将整个项目上传到GitHub上，如果这样更容易分析的话

---

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

在App.jsx中，您应该添加一个

componentDidMount

方法。只要组件装入DOM中，就会调用此方法（有关更多信息，请参见第2点）。在这个方法中，您可以调用您的

getDailyWeatherByCountry

，它将成功地console.log（）

请看一下React的方法，因为您使用的是旧方法

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

---

随着您提供更多详细信息，我将更新我的答案。

“它是如何工作的？”。这个问题太宽泛了。如果您对某些内容不确定，您有义务解释具体内容，您需要通过引用部分代码以及您确实理解的内容来帮助理解。所以不是免费的辅导服务。请参阅：执行部分在这里有点棘手，因为我不确定您是否尝试运行

npm run start

。如果是，则可能缺少带有API键的env文件（不是

.env.example

，而是

.env

）。如果这也不起作用，可能是因为您导入的是整个api文件夹，而仅在代码（模板部分）

App

中使用，所以您使用的组件错误（您可能应该使用

getDailyWeatherByCountry

，但可能有更熟练的react人员会添加几个百分点。我不认为您实际上是在从任何地方调用

getDailyWeatherByCountry

函数。还应始终尝试添加有关您已尝试执行的操作的信息（例如尝试运行、尝试更改文件名等）这大大帮助了那些试图帮助你的人

    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()}`;
}