當狀態更改時，它呈現不正確page我單擊類別鏈接并檢查鏈接是否存在于類別中，然后應將page狀態設定為category，同樣，如果我單擊配方鏈接，它應將page狀態設定為recipe。
isRecipe和的值isCategory是正確的，但它只page在重繪 頁面后正確設定狀態。
它應該觀察頁面狀態，如果它發生變化，那么它應該重新渲染組件
如果頁面狀態發生變化，如何重新渲染組件？
const categories = [
{name: 'first', slug: 'first'},
{name: 'second', slug: 'second'},
]
const recipes = [
{name: 'firstRecipe', slug: 'firstRecipe'},
{name: 'secondRecipe', slug: 'secondRecipe'},
]
const Categories = ({ categories, recipe, recipes }) => {
const router = useRouter()
const { slug } = router.query
const isRecipe = !!recipes.find(recipe => recipe.slug === slug)
const isCategory = !!categories.find(cat => cat.slug === slug)
const [page, setPage] = useState('')
useEffect(() => {
!!isCategory && setPage('category')
!!isRecipe && setPage('recipe')
}, [page])
return (
<>
<a href="/first"> category </a>
<a href="/firstRecipe"> recipe </a>
{page === 'category' && <Category /> }
{page === 'recipe' && <Recipes /> }
</>
)
}
export default Categories
uj5u.com熱心網友回復：
鉤子的依賴關系useEffect實際上是isRecipe等isCategory而不是[page]，效果應該依賴于[isRecipe, isCategory]。
或者，由于助手 (isCategory和isRecipe) 派生自slug，它們可以被移動到鉤子中，然后只[slug]需要設定正確的鉤子依賴項。
注意：setPage不需要將 提供給鉤子依賴項串列，因為 React 保證它是穩定的 - 省略它是安全的。
理想情況下，可以通過如下簡單的計算完全避免該狀態：
page = null
if (isRecipe) {
page = <Recipe />
} else if (isCategory) {
page = <Category/>
}
...
<>
...
{page}
<\>
實際上存在三種可能的情況：食譜頁面、類別頁面以及與前兩種不匹配的其他情況，通過渲染null很可能會導致上述代碼所預期的結果。
更少的狀態、鉤子和突變，導致更少的移動部件，因此很可能更少的錯誤??
uj5u.com熱心網友回復：
試試這個，添加依賴項：
const categories = [
{name: 'first', slug: 'first'},
{name: 'second', slug: 'second'},
]
const recipes = [
{name: 'firstRecipe', slug: 'firstRecipe'},
{name: 'secondRecipe', slug: 'secondRecipe'},
]
const Categories = ({ categories, recipe, recipes }) => {
const router = useRouter()
const { slug } = router.query
const isRecipe = !!recipes.find(recipe => recipe.slug === slug)
const isCategory = !!categories.find(cat => cat.slug === slug)
const [page, setPage] = useState('')
useEffect(() => {
!!isCategory && setPage('category')
!!isRecipe && setPage('recipe')
}, [page, isRecipe, isCategory ])
return (
<>
<a href="/first"> category </a>
<a href="/firstRecipe"> recipe </a>
{page === 'category' && <Category /> }
{page === 'recipe' && <Recipes /> }
</>
)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/507129.html
標籤：javascript 反应
上一篇：串列不會自動更新撰寫