Die Verwendung von „this“ zum Aktualisieren von useState in einer Funktion während des Buildvorgangs führt zu einem undefinierten Fehler – Nuxt 3 & Strapi 4.12 – SFC (Skript-Setup)

Question

"@strapi/strapi": "4.12.0",

"nuxt": "^3.6.5",

In meiner Entwicklungsumgebung habe ich eine Projektseite mit einem Kategoriefilter, der entweder alle Projekte oder Kategorien mit entsprechenden Projekten anzeigt.

Ich verwende useAsyncQuery, um Elemente und Kategorien von Strapi abzurufen.

Im Filter gibt es ein Dropdown-Menü mit verschiedenen Kategorien. Wenn auf diese Kategorien geklickt wird, wird die Funktion switchCategory(filter.id) aufgerufen. In dieser Funktion werden damit verschiedene Zustände aktualisiert.

请查看以下脚本设置:

import { projectQuery } from „~/queries/projects/archive“;
import { filterQuery } from „~/queries/projects/filter“;

const { data: filterRes } = waiting useAsyncQuery(filterQuery)
const { Daten: ProjekteRes } = Warten auf useAsyncQuery(projectsQuery)

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

var filterActiveText = useState('filterActiveText', () => 'Alle Projekte')
const projectUrl = useState('projectsUrl', () => '/projecten/')

const filter = useState('filters', () => filterRes.value.projectCategories.data)
const Projekte = useState('Projekte', () => ProjekteRes.value.projects.data)
var filteredProjects = useState('filteredProjects', () => Projekte)

Funktion switchCategory(id) {

  this.isLoading = true
  this.filterActive = false;

  document.getElementById("projects-container").scrollIntoView({
    Verhalten: 'glatt',
  });


  setTimeout(() => {
    if (id) {
      this.filters.map((item) => {
        if (id == item.id) {
          this.filteredProjects = item.attributes.projects.data;
          this.filterActiveText = item.attributes.Title;
        }
      });
    } anders {
      this.filteredProjects = this.projects;
      this.filterActiveText = 'Alle Projekte';
    }
    this.isLoading = false;
  }, 600)
}

并且在模板元素中:

<div class="flex flex-col gap-y-8 md:gap-y-24 lg:gap-y-40 Übergangsdauer für alle -600 Ease-in-out" :class="{
  'blur-0': !isLoading,
  'blur': isLoading,
}">
  <div class="grid md:grid-cols-2 gap-8 md:gap-16 lg:gap-24 relative" v-for="(project, id) in filteredProjects" :key="id">
    <Nuxt-Link class="absoluter Einschub-0 w-voll h-voll z-10"
      :to="projectsUrl + project.attributes.Slug"></Nuxt-Link>
    <div class="flex flex-col items-start justify-between">
      <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>
      <Button class="flex mb-4" color="light" :to="projectsUrl + project.attributes.Slug">
        Projekt bekijken
      </Button>
    </div>
    <div class="-order-1 md:order-1 relative">
      <div class="aspect-video md:aspect-square lg:aspect-[12/18] relative">
        <Medien
          :url="project.attributes.FeaturedImage.data.attributes.url"
          :extension="project.attributes.FeaturedImage.data.attributes.ext"
        />
      </div>
    </div>
  </div>

</div>

Wenn ich das Projekt erstelle, nuxt build verwende und dann node .output/server/index.mjs verwende, um einen Node-Server zu starten, kann das Projekt normal geladen werden. Aber wenn ich versuche zu filtern, während ich versuche, Variablen wie isLoading und filterActive innerhalb der switchCategory-Funktion zu aktualisieren, wird der Fehler ausgegeben: TypeError: Eigenschaften von undefiniert können nicht festgelegt werden (Einstellung von „isLoading“).

Fix-Versuch Nr. 1

Ich dachte, vielleicht versteht es nach dem Erstellen diesen Kontext nicht (denn wenn ich versuche, console.log , das ist auch undefiniert). Also habe ich versucht, den Code wie folgt umzugestalten: ;

const switchCategory = (id) =>

  isLoading = true
  filterActive = false;

  document.getElementById("projects-container").scrollIntoView({
    Verhalten: 'glatt',
  });


  setTimeout(() => {
    if (id && filter) {
      filter && filter.value.map((item) => {
        if (id == item.id) {
          filteredProjects = item.attributes.projects.data;
          filterActiveText = item.attributes.Title;
        }
      });
    } anders {
      filteredProjects = Projekte;
      filterActiveText = 'Alle Projekte';
    }
    isLoading = false;
  }, 600)
}

Ich habe die normale Funktion in eine Pfeilfunktion geändert und diese entfernt.

In setTimeout musste ich filter.map in filter.value.map ändern (ich bin mir nicht wirklich sicher, warum sich das Format geändert hat).

Jetzt läuft der Code einwandfrei (keine Fehler), aber er aktualisiert nicht das DOM der Elementschleife in der Vorlage.

Fix-Versuch Nr. 2

Nachdem ich eine ganze Weile gesucht und debuggt habe, habe ich den Inhalt von defineExpose in der Vue-Dokumentation gefunden.

Es wird erwähnt, dass die Skripteinstellungen standardmäßig „geschlossen“ sind. Ich habe dies (verzweifelt) zu meinen Skripteinstellungen hinzugefügt, einschließlich aller Variablen:

;

defineExpose({
  filterRes,
  ProjekteRes,
  pageRes,
  ladet,
  filterActive,
  filterActiveText,
  ProjekteUrl,
  Filter,
  Projekte,
  gefilterteProjekte,
})

Leider hat es wie erwartet nicht wie von Zauberhand funktioniert.

Lösung?
Ich sehe das wahrscheinlich falsch, aber mir fällt keine andere Lösung ein.

Übersehe ich etwas?

Answer 1

我不确定能否提供一个完整的可工作的代码片段，但也许我可以指导您找到解决方案。

useState只在构建时或组件渲染时可用。因此，在渲染后更改查询参数不会使其更新。也许在状态变更后重新渲染组件会有帮助？