在建置過程中使用`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>