<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) 함수가 호출됩니다. 이 함수에서는 이를 이용하여 다양한 상태를 업데이트합니다.<br /><br />请查看以下脚本设置：</p><p><code></code></p>
<pre class="brush:php;toolbar:false;">
"~/queries/projects/archive"에서 { projectsQuery }를 가져옵니다.
"~/queries/projects/filter"에서 { filterQuery }를 가져옵니다.
const { data: filterRes } = useAsyncQuery(filterQuery)를 기다립니다.
const { data: projectsRes } = useAsyncQuery(projectsQuery)를 기다립니다.
var isLoading = useState('isLoading', () => false)
var filterActive = useState('filterActive', () => false)
var filterActiveText = useState('filterActiveText', () => '모든 투영')
const projectsUrl = 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 = 거짓;
document.getElementById("projects-container").scrollIntoView({
행동: '부드럽다',
});
setTimeout(() => {
만약 (ID) {
this.filters.map((항목) => {
if (id == item.id) {
this.filteredProjects = item.attributes.projects.data;
this.filterActiveText = item.attributes.Title;
}
});
} 또 다른 {
this.filteredProjects = this.projects;
this.filterActiveText = '모든 투영';
}
this.isLoading = 거짓;
}, 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 easy-in-out" :class="{
'blur-0': !isLoading,
'흐림': isLoading,
}">
<div class="grid md:grid-cols-2 gap-8 md:gap-16 lg:gap-24 상대" v-for="(project, id) infilteredProjects" :key="id">
<Nuxt-Link class="절대 삽입-0 w-full h-full 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-5xlfont-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">
프로젝트 베키켄
</버튼>
</div>
<div class="-order-1 md:order-1 상대">
<div class="aspect-video md:aspect-square lg:aspect-[12/18] 상대">
<미디어
:url="project.attributes.FeaturedImage.data.attributes.url"
:extension="project.attributes.FeaturedImage.data.attributes.ext"
/>
</div>
</div>
</div>
</div></pre>
<p>프로젝트를 빌드할 때 nuxt build를 사용한 다음 node .output/server/index.mjs를 사용하여 Node 서버를 시작하면 프로젝트가 정상적으로 로드될 수 있습니다. 그러나 필터링을 시도할 때 switchCategory 함수 내에서 isLoading 및 filterActive와 같은 변수를 업데이트하려고 하면 다음 오류가 발생합니다. TypeError: Cannot set Properties of un Defined (setting 'isLoading'). <br /><br />Fix Attempt #1<br /><br />빌드 후에는 이 컨텍스트를 이해하지 못할 수도 있다고 생각했습니다( 왜냐하면 console.log를 시도할 때 때문입니다). , 이것도 정의되지 않았습니다). 그래서 다음과 같이 코드를 리팩터링해 보았습니다.
<pre class="brush:php;toolbar:false;">const switchCategory = (id) =>
isLoading = 사실
필터액티브 = 거짓;
document.getElementById("프로젝트-컨테이너").scrollIntoView({
행동: '부드럽다',
});
setTimeout(() => {
if (id && 필터) {
필터 &&filters.value.map((item) => {
if (id == item.id) {
filteredProjects = item.attributes.projects.data;
filterActiveText = item.attributes.Title;
}
});
} 또 다른 {
FilteredProjects = 프로젝트;
filterActiveText = '모든 투영';
}
isLoading = 거짓;
}, 600)
}</pre>
<p>일반 함수를 화살표 함수로 변경하고 이를 제거했습니다. <br /><br />setTimeout에서 filter.map을 filter.value.map으로 변경해야 했습니다(형식이 변경된 이유는 확실하지 않습니다). <br /><br />이제 코드는 제대로 실행되지만(오류 없음) 템플릿에 있는 항목 루프의 DOM이 업데이트되지 않습니다. <br /><br />Fix Attempt #2<br /><br /> 꽤 오랫동안 검색하고 디버깅한 끝에 Vue 문서에서 DefineExpose 내용을 발견했습니다. <br /><br />스크립트 설정은 기본적으로 "닫혀있다"고 언급되어 있습니다. 나는 (필사적으로) 모든 변수를 포함하여 이것을 내 스크립트 설정에 추가했습니다: </p><p><code></code><em></em></p>
<pre class="brush:php;toolbar:false;">defineExpose({
필터 해상도,
프로젝트Res,
페이지 해상도,
로드 중,
필터활성,
필터활성텍스트,
프로젝트URL,
필터,
프로젝트,
필터링된프로젝트,
})</pre>
<p>안타깝게도 예상한 대로 마술처럼 작동하지 않았습니다. <br /><br />해결책은요? <br />아마도 잘못된 방향으로 보고 있는 것 같지만 다른 해결책이 생각나지 않습니다.<br /><br />제가 뭔가 놓치고 있는 게 있나요?
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
완전히 작동하는 코드 조각을 제공할 수 있을지는 모르겠지만 해결 방법을 안내해 드릴 수는 있습니다.
useState는 구성 요소를 빌드하거나 렌더링할 때만 사용할 수 있습니다. 따라서 렌더링 후에 쿼리 매개변수를 변경해도 업데이트되지 않습니다. 상태 변경 후 구성 요소를 다시 렌더링하는 것이 도움이 될까요?