（承诺中）TypeError：无法读取 null 的属性“0”

Question

当我从函数分配数据时，我遇到了问题。错误出现在控制台中（（承诺中） TypeError: Cannot read property '0' ）但我的应用程序上显示的数据

代码如下：

                    <template>
                    <div class="row">
                        <div class="col-lg-12 bg-white" style="height: 100vh; overflow: scroll;">
                            <div class="wrap-content">
                                <h5 class="py-3 text-primary">QS</h5>

                                <div class="hero text-white px-3 py-4 mb-5">
                                    <p class="font-weight-300 font-12">Jumat, 23 April 2021 / 6 Syawal 1438</p>
                                    <h4>{{ jadwal_belum_terlewat[0].time }} WIB</h4>
                                    <p class="font-weight-300 font-14">Waktu shalat berikutnya</p>

                                    <p class="font-weight-300 font-12 mb-0"><i class="fas fa-map-marker-alt"></i> {{ this.address }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>

                <script>
                    // import moment from 'moment'
                    import Alert from '../components/Alert'

                    export default {
                        name: 'JadwalShalat',
                        components: {
                            Alert
                        },
                        data() {
                            return {
                                error_flag: false,
                                error_message: '',
                                lat: '',
                                long: '',
                                jadwal_belum_terlewat : null,
                                jadwal: [
                                    {
                                        name: 'SUBUH',
                                        time: ''
                                    },
                                    {
                                        name: 'DZUHUR',
                                        time: ''
                                    },
                                    {
                                        name: 'ASHAR',
                                        time: ''
                                    },
                                    {
                                        name: 'MAGHRIB',
                                        time: ''
                                    },
                                    {
                                        name: 'ISYA',
                                        time: ''
                                    }
                                ],
                                address: ''
                            }
                        },
                        methods: {
                            async getUserCoordinates() {
                                const check_permissions = await navigator.permissions.query({ name: 'geolocation' });
                                
                                if(check_permissions.state == 'granted') {
                                    this.error_flag = false;
                                    this.error_message = "";

                                    if (navigator.geolocation) {
                                        navigator.geolocation.getCurrentPosition(this.showPosition)

                                        this.error_flag = false;
                                        this.error_message = "";
                                    } else { 
                                        this.error_flag = true;
                                        this.error_message = "Perangkat anda tidak mendukung GPS";
                                    }
                                } else {
                                    this.error_flag = true;
                                    this.error_message = "Silahkan aktifkan GPS terlebih dahulu";
                                }
                            },
                            showPosition(position) {
                                this.lat = position.coords.latitude;
                                this.long = position.coords.longitude;

                                this.getDetailShalat();
                            },
                            async getDetailShalat() {
                                const res = await fetch(`https://api.pray.zone/v2/times/today.json?latitude=${this.lat}&longitude=${this.long}`)

                                if(res.ok) {
                                    const data = await res.json();

                                    this.jadwal[0].time = data.results.datetime[0].times.Fajr;
                                    this.jadwal[1].time = data.results.datetime[0].times.Dhuhr;
                                    this.jadwal[2].time = data.results.datetime[0].times.Asr;
                                    this.jadwal[3].time = data.results.datetime[0].times.Maghrib;
                                    this.jadwal[4].time = data.results.datetime[0].times.Isha;

                                    this.jadwal_belum_terlewat = this.jadwal.filter((data) => this.now < data.time);
                                }
                            },
                        },
                        created() {
                            this.getUserCoordinates()
                        }
                    }
                </script>

我想用 this.jadwal.filter((data) => this.now

希望你能帮帮我，谢谢

Answer 1

您的check_permissions 的状态为：prompt，因此代码不会进入您的 if 块

if (check_permissions.state === "granted") { //<------------------- false
        this.error_flag = false;
        this.error_message = "";

        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(this.showPosition); //<--- why not passing a param here? your function showPosition await a parameter

          this.error_flag = false;
          this.error_message = "";
        } else {
          this.error_flag = true;
          this.error_message = "Perangkat anda tidak mendukung GPS";
        }
      } else // <---------- your landing here
        this.error_flag = true;
        this.error_message = "Silahkan aktifkan GPS terlebih dahulu";
      }

然后你的代码就结束了。

顺便说一句，不需要像这里那样等待同步函数

                  // no need to await since navigator.permission is not async at all
const check_permissions = await navigator.permissions.query({
        name: "geolocation",
      });