state 更改后反應組件未重新渲染

Question

當page state 更改時呈現不正確我單擊類別鏈接並檢查該鏈接是否存在於類別中，然后應將page state 設置為category ，同樣，如果我單擊配方鏈接，它應該將page Z9ED39E2EA931586B3EZEF 設置為recipe 。

isRecipe和isCategory的值是正確的，但它只在刷新頁面后正確設置page state。

它應該觀看頁面 state，如果它發生變化，那么它應該重新渲染組件

如果頁面 state 發生更改，我如何重新渲染組件？

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

Answer 1

試試這個，添加依賴項：

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 /> }
    </>
  )
}

Answer 2

useEffect掛鈎的依賴項實際上是isRecipe和isCategory ，所以效果應該依賴於[isRecipe, isCategory]而不是[page] ] 。

或者，由於助手（ isCategory和isRecipe ）是從slug派生的，它們可以被移動到鈎子中，然后只需要[slug]來設置正確的鈎子依賴項。

注意： setPage不需要提供給鈎子依賴列表，因為 React 保證它是穩定的 - 省略它是安全的。

理想情況下，可以通過如下簡單計算完全避免 state：

page = null

if (isRecipe) {
  page = <Recipe />
} else if (isCategory) {
  page = <Category/>
}

...

<>
  ...
  {page}
<\>

實際上存在三種可能的情況：配方頁面、類別頁面以及與前兩種不匹配的其他情況，通過呈現null很可能會導致上述代碼所預期的結果。

更少的 state、鈎子和突變導致更少的移動部件，因此很可能更少的錯誤