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、钩子和突变导致更少的移动部件，因此很可能更少的错误