搜尋

首頁  >  問答  >  主體

在建置過程中使用`this`更新函數中的useState會導致未定義錯誤 - Nuxt 3 & Strapi 4.12 - SFC(script setup)

<p><br /></p><h2><br /></h2> <p><code>"@strapi/strapi": "4.12.0",</code></p> <p><code>"nuxt": "^3.6.5",</code></p> <p>在我的開發環境中,我有一個專案頁面,帶有一個分類篩選器,可以顯示所有專案或帶有相應專案的分類。 <br /><br />我正在使用useAsyncQuery從Strapi獲取項目和分類。 <br /><br />在篩選器中,有一個下拉式選單,其中包含各種分類。點擊這些分類時,將呼叫函數switchCategory(filter.id)。在該函數中,使用this更新了各種狀態。<br /><br />請看以下腳本設定:</p><p><code></code></p> <pre class="brush:php;toolbar:false;"> 從“~/queries/projects/archive”導入{projectsQuery}; 從“~/queries/projects/filter”導入{filterQuery}; const { 資料:filterRes } = 等待 useAsyncQuery(filterQuery) const { 資料:projectsRes } = 等待 useAsyncQuery(projectsQuery) var isLoading = useState('isLoading', () => false) var filterActive = useState('filterActive', () => false) var filterActiveText = useState('filterActiveText', () => '所有項目') const itemsUrl = useState('projectsUrl', () => '/projecten/') const 過濾器 = useState('filters', () => filterRes.value.projectCategories.data) const 專案 = useState('projects', () =>projectsRes.value.projects.data) var FilteredProjects = useState('filteredProjects', () => 項目) 函數 switchCategory(id) { this.isLoading = true this.filterActive = false; document.getElementById("projects-container").scrollIntoView({ 行為:“平滑”, }); setTimeout(() => { 如果(id){ this.filters.map((item) => { if (id == item.id) { this.filteredProjects = item.attributes.projects.data; this.filterActiveText = item.attributes.Title; } }); } 別的 { this.filteredProjects = this.projects; this.filterActiveText = '所有項目'; } this.isLoading = false; }, 600) }</pre> <p>並且在範本元素中:</p> <pre class="brush:php;toolbar:false;"><div class="flex flex-col gap-y-8 md:gap-y-24 lg:gap-y-40 過渡所有持續時間-600 緩入出" :class="{ 'blur-0': !正在載入, '模糊':正在加載, }">
{{ project.attributes.Title }}; <p class="block">{{ project.attributes.Intro }}</p>
;
<媒體 :url="project.attributes.FeaturedImage.data.attributes.url" :extension="project.attributes.FeaturedImage.data.attributes.ext" >>
;</pre> <p>當我建立專案時,使用nuxt build,然後使用node .output/server/index.mjs啟動一個Node伺服器,專案能夠正常載入。但是當我嘗試進行篩選時,試圖在switchCategory函數內更新isLoading和filterActive等變數時,它拋出了錯誤:TypeError: Cannot set properties of undefined (setting 'isLoading')。 <br /><br />修復嘗試#1<br /><br />我想,也許在構建後,它無法理解this上下文(因為當我嘗試console.log時, this也是undefined)。所以我試著重構程式碼,像這樣:</p><p><code></code><code></code><code></code></p>><code></code></p><</code><code></code></p> ; <pre class="brush:php;toolbar:false;">const switchCategory = (id) => { isLoading = true filterActive = false; document.getElementById("projects-container").scrollIntoView({ behavior: 'smooth', }); setTimeout(() => { if (id && filters) { filters && filters.value.map((item) => { if (id == item.id) { filteredProjects = item.attributes.projects.data; filterActiveText = item.attributes.Title; } }); } else { filteredProjects = projects; filterActiveText = 'Alle projecten'; } isLoading = false; }, 600) }</pre> <p>我將普通函數更改為箭頭函數並刪除了this。 <br /><br />在setTimeout中,我必須將filters.map改為filters.value.map(不太確定為什麼格式改變了)。 <br /><br />現在程式碼運作正常(沒有錯誤),但它沒有更新範本中專案循環的DOM。 <br /><br />修復嘗試 #2<br /><br />在搜索和調試了相當長時間後,我在Vue文檔中找到了defineExpose的內容。 <br /><br />它提到腳本設定預設是"closed"的。我(絕望地)將其添加到了我的腳本設定中,包括所有變數:</p><p><code></code><em></em>code</p> ; <pre class="brush:php;toolbar:false;">defineExpose({ filterRes, projectsRes, pageRes, isLoading, filterActive, filterActiveText, projectsUrl, filters, projects, filteredProjects, })</pre> <p>不幸的是,正如預期的那樣,它並沒有神奇地起作用。 <br /><br />解決方案? <br />我很可能是以錯誤的方式來看待這個問題,但我無法想出其他解決方案。<br /><br />我是否漏掉了什麼? </p><p><br /></p>
P粉436410586P粉436410586482 天前513

全部回覆(1)我來回復

  • P粉627427202

    P粉6274272022023-08-04 10:06:18

    我不確定能否提供一個完整的可工作的程式碼片段,但也許我可以引導您找到解決方案。

    useState只在建置時或元件渲染時可用。因此,在渲染後更改查詢參數不會使其更新。也許在狀態變更後重新渲染元件會有幫助?


    回覆
    0
  • 取消回覆