Vue CLI – TypeError: Eigenschaft von undefiniert kann nicht gelesen werden (lesen Sie „1')

Question

Ich bin ein Anfänger in VueJS und würde mich über Ihre Hilfe freuen.

Ich versuche, eine Wettervorhersageanwendung basierend auf OpenWeatherMap API zu erstellen.

Das Konzept ist so:

1. Geben Sie auf der Startseite einen Ort ein und klicken Sie auf die Suchschaltfläche. (In meinem Code ist es eine Komponente Search.vue)
2. Weiterleitung zu einer anderen Seite und Anzeige der Ergebnisse – aktuelles Wetter und Wettervorhersage für die nächsten 6 Tage. (Komponente Weather.vue)

Ich habe eine Funktion mit zwei konsistenten Abrufaufrufen erstellt. Holen Sie sich zuerst die Eingabe der Eingabe query 并从 Current Weather Data API 返回所需的数据。之后，函数运行第二次获取到 One 根据第一次获取的 latitude longitude 调用 API.

Alles funktioniert und wird gut angezeigt, aber ich verstehe nicht, warum ich einen Fehler Uncaught (in Promise) TypeError: Cannot readproperties of undefined (reading '1') in der Konsole habe:

Weiß jemand, wie man diesen Fehler beheben kann?

Meine Search.vue (Heim-)Komponente:

<template>
    <div class="row">
        <div class="search-col col">
            <div class="search-box">
                <input 
                    type="text" 
                    class="search-bar" 
                    placeholder="Location" 
                    v-model="query">
                <router-link :to="{name: 'DetailedWeather', params: { query: query }}" class="btn-search">
                    <i class="fas fa-search"></i>
                </router-link>
            </div>
        </div>
    </div>
</template>

Meine Weather.vue (Anzeigeseite für Wetterergebnisse) Komponente:

<template>
    <div class="row" v-if="typeof weather.main != 'undefined'">
        <div class="weather-col col">
            <div class="weather-app">
                <div class="weather-box">
                    <div class="weather-top-info">
                        <div class="clouds-level"><span class="icon"><i class="fas fa-cloud"></i></span> {{ weather.clouds.all }}%</div>
                        <div class="humidity"><span class="icon"><i class="fas fa-tint"></i></span> {{ weather.main.humidity }}%</div>
                    </div>
                    <div class="weather-main-info">
                        <div class="temp-box">
                            <div class="temp-main">{{ Math.round(weather.main.temp) }}</div>
                            <div class="temp-inner-box">
                                <div class="temp-sign">°C</div>
                                <div class="temp-max"><span class="icon"><i class="fas fa-long-arrow-alt-up"></i></span> {{ Math.round(weather.main.temp_max) }}°</div>
                                <div class="temp-min"><span class="icon"><i class="fas fa-long-arrow-alt-down"></i></span> {{ Math.round(weather.main.temp_min) }}°</div>
                            </div>
                        </div>
                        <div class="weather-desc">{{ weather.weather[0].description }}</div>
                        <div class="weather-icon">
                            <img :src="'http://openweathermap.org/img/wn/'+ weather.weather[0].icon +'@4x.png'">  
                        </div>
                    </div>
                    <div class="weather-extra-info">
                        <div>Feels like: <span>{{ Math.round(weather.main.feels_like) }}°C</span></div>
                        <div>Sunrise: <span>{{ weather.sys.sunrise }}</span></div>
                        <div>Sunset: <span>{{ weather.sys.sunset }}</span></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="forecast-col col">
            <div class="row">
                <div class="forecast-item-col col"  v-for="day in forecastDays" :key="day">
                    <div class="forecast-box">
                        <div class="forecast-date">{{ forecast.daily[day].dt }}</div>
                        <div class="forecast-temp">{{ Math.round(forecast.daily[day].temp.day) }}°C</div>
                        <div class="forecast-icon"><img :src="'http://openweathermap.org/img/wn/'+ forecast.daily[day].weather[0].icon +'@2x.png'"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="actions-col col">
            <router-link :to="{name: 'Search'}" class="btn btn-default">
                Back to search
            </router-link>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'Weather',
        props: ['query'], //getting from homepage
        data() {
            return {
                api_key:'b7fe640e9a244244a6f806f3a6cbf5fc',
                url_base:'https://api.openweathermap.org/data/2.5/',
                forecastDays: 6,
                weather: {},
                forecast: {}
                
            }
        },
    methods: {
        fetchWeather(){
            // first call
            fetch(`${this.url_base}weather?q=${this.query}&units=metric&appid=${this.api_key}`)
            .then(response =>{ return response.json() }).then(this.setResults);
        },
        setResults(results){
          this.weather = results;

          // consistent second call
          fetch(`${this.url_base}onecall?lat=${results.coord.lat}&lon=${results.coord.lon}&exclude=current,minutely,hourly,alerts&units=metric&appid=${this.api_key}`)
          .then(data =>{ return data.json() }).then(this.setForecast);
        },
    
        setForecast(results){
            this.forecast = results
        },
    },
    created() {
        this.fetchWeather();
    }
</script>

Meine router/index.js Datei:

import { createRouter, createWebHashHistory } from 'vue-router'
import Search from '../components/Search.vue'
import Weather from '../components/Weather.vue'

const routes = [
  {
    path: '/',
    name: 'Search',
    component: Search
  },
  {
    path: '/detailed-weather',
    name: 'DetailedWeather',
    component: Weather,
    props: true
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

Answer 1

根据我的猜测（给出代码和错误），您从 API 接收的对象可能存在问题。

错误消息表明您正在尝试从数组中未定义的特定索引处读取某些内容。

代码中唯一可能导致此错误的情况是来自您正在阅读的模板，例如：

{{ forecast.daily[day].dt }}
{{ Math.round(forecast.daily[day].temp.day) }}

我无法准确分辨出它是哪一个，但请尝试仔细检查您正在使用的对象的形状。