Menggunakan `this` untuk mengemas kini useState dalam fungsi semasa membina menghasilkan ralat yang tidak ditentukan - Nuxt 3 & Strapi 4.12 - SFC (persediaan skrip)

Question

"@strapi/strapi": "4.12.0",

"nuxt": "^3.6.5",

Dalam persekitaran pembangunan saya, saya mempunyai halaman projek dengan penapis kategori yang menunjukkan sama ada semua projek atau kategori dengan projek yang sepadan.

Saya menggunakan useAsyncQuery untuk mendapatkan item dan kategori daripada Strapi.

Dalam penapis, terdapat menu lungsur dengan pelbagai kategori. Apabila kategori ini diklik, fungsi switchCategory(filter.id) akan dipanggil. Dalam fungsi ini, pelbagai negeri dikemas kini menggunakan ini.

请查看以下脚本设置：

import { projectsQuery } daripada "~/queries/projects/archive";
import { filterQuery } daripada "~/queries/projects/filter";

const { data: filterRes } = tunggu useAsyncQuery(filterQuery)
const { data: projectsRes } = menunggu useAsyncQuery(projectsQuery)

var isLoading = useState('isLoading', () => false)
var filterActive = useState('filterActive', () => false)

var filterActiveText = useState('filterActiveText', () => 'Semua unjuran')
const projectsUrl = useState('projectsUrl', () => '/projecten/')

penapis const = useState('penapis', () => filterRes.value.projectCategories.data)
const projects = useState('projects', () => projectsRes.value.projects.data)
var filteredProjects = useState('filteredProjects', () => projek)

suis fungsiKategori(id) {

  this.isLoading = benar
  this.filterActive = palsu;

  document.getElementById("projects-container").scrollIntoView({
    tingkah laku: 'licin',
  });


  setTimeout(() => {
    jika (id) {
      this.filters.map((item) => {
        if (id == item.id) {
          this.filteredProjects = item.attributes.projects.data;
          this.filterActiveText = item.attributes.Title;
        }
      });
    } lain {
      this.filteredProjects = this.projects;
      this.filterActiveText = 'Semua projek';
    }
    this.isLoading = palsu;
  }, 600)
}

并且在模板元素中：

<div class="flex flex-col gap-y-8 md:gap-y-24 lg:gap-y-40 transisi-semua tempoh -600 kemudahan-keluar" :class="{
  'blur-0': !isLoading,
  'kabur': isLoading,
}">
  <div class="grid md:grid-cols-2 gap-8 md:gap-16 lg:gap-24 relative" v-for="(projek, id) dalam FilteredProjects" :key="id">
    <Nuxt-Link class="inset mutlak-0 w-penuh h-penuh z-10"
      :to="projectsUrl + project.attributes.Slug"></Nuxt-Link>
    <div class="flex flex-col items-start justify-antara">
      <div class="sticky top-40 pb-16 lg:pb-20 prose-xl">
        <h3 class="text-xl md:text-4xl lg:text-5xl font-bold">{{ project.attributes.Title }}</h3>
        <p class="block">{{ project.attributes.Intro }}</p>
      </div>
      <Butang class="flex mb-4" color="light" :to="projectsUrl + project.attributes.Slug">
        Projek bekijken
      </Butang>
    </div>
    <div class="-order-1 md:order-1 relative">
      <div class="aspect-video md:aspect-square lg:aspect-[12/18] relative">
        <Media
          :url="project.attributes.FeaturedImage.data.attributes.url"
          :extension="project.attributes.FeaturedImage.data.attributes.ext"
        />
      </div>
    </div>
  </div>

</div></pra>
<p>Apabila saya membina projek, gunakan binaan nuxt, dan kemudian gunakan node .output/server/index.mjs untuk memulakan pelayan Node, projek boleh dimuatkan seperti biasa. Tetapi apabila saya cuba menapis, semasa cuba mengemas kini pembolehubah seperti isLoading dan filterActive di dalam fungsi switchCategory, ia menimbulkan ralat: TypeError: Tidak boleh menetapkan sifat yang tidak ditentukan (menetapkan 'isLoading'). <br /><br />Betulkan Percubaan #1<br /><br />Saya fikir, mungkin selepas membina, ia tidak memahami konteks ini (kerana apabila saya cuba console.log , ini juga tidak ditentukan). Jadi saya cuba memfaktorkan semula kod, seperti ini: ;
<pre class="brush:php;toolbar:false;">const switchCategory = (id) =>

  isLoading = benar
  filterActive = palsu;

  document.getElementById("projects-container").scrollIntoView({
    tingkah laku: 'licin',
  });


  setTimeout(() => {
    if (id && penapis) {
      penapis && filters.value.map((item) => {
        if (id == item.id) {
          filteredProjects = item.attributes.projects.data;
          filterActiveText = item.attributes.Title;
        }
      });
    } lain {
      filteredProjects = projek;
      filterActiveText = 'Semua unjuran';
    }
    isLoading = palsu;
  }, 600)
}

Saya menukar fungsi biasa kepada fungsi anak panah dan mengalih keluar ini.

Dalam setTimeout, saya terpaksa menukar filters.map kepada filters.value.map (tidak pasti mengapa format berubah).

Kini kod berjalan dengan baik (tiada ralat), tetapi ia tidak mengemas kini DOM gelung item dalam templat.

Betulkan Percubaan #2

Selepas mencari dan menyahpepijat untuk beberapa lama, saya menemui kandungan defineExpose dalam dokumentasi Vue.

Ia menyebut bahawa tetapan skrip "ditutup" secara lalai. Saya (terdesak) menambahkan ini pada tetapan skrip saya, termasuk semua pembolehubah:

;

defineExpose({
  filterRes,
  projectsRes,
  pageRes,
  sedang memuatkan,
  penapisAktif,
  penapisActiveTeks,
  projectsUrl,
  penapis,
  projek,
  Projek yang ditapis,
})

Malangnya, seperti yang dijangkakan, ia tidak berkesan.

Penyelesaian?
Saya mungkin melihat ini dengan cara yang salah, tetapi saya tidak dapat memikirkan sebarang penyelesaian lain.

Adakah saya kehilangan sesuatu?

Answer 1

Saya tidak pasti saya boleh memberikan coretan kod berfungsi yang lengkap, tetapi mungkin saya boleh membimbing anda kepada penyelesaian.

useState hanya tersedia semasa membina atau apabila komponen dipaparkan. Jadi menukar parameter pertanyaan selepas pemaparan tidak akan mengemas kininya. Mungkin memaparkan semula komponen selepas perubahan keadaan akan membantu?